How does a subcomponent in Vue get the value of its parent component? (props implementation)

How to transfer data from parent component to child component in vue? The scope of component instances is isolated. This means that the parent component's data cannot be referenced directly within the child component's template. The data of the parent component needs to be sent to the child component through props. That is, props are the only interface for child components to access parent component data. Therefore, child components need to use props to reference parent components.

That is,propsis the only interface for child components to access parent component data.

A detailed explanation is:

A component can directly render the data in the template (double curly brackets).

Subcomponent cannot directly render the data of the parent element in the template.

If the child component wants to reference the data of the parent element, then declare a variable (such as a) in prop, and this variable can reference the data of the parent element. Then render this variable (the previous a) in the template, and what is rendered at this time is the data in the parent element.

1. Basic usage

As shown in the figure:

2. camelCase vs. kebab-case: Use camelCase naming in js and replace it with dash-delimited naming in html

3. One-way data flow: Props are one-way binding

When the properties of the parent component change, they will be transmitted to the child component, but not vice versa.

Every time the parent component is updated, all props of the child component will be updated to the latest values.

Don't change props inside child components. If you do this, Vue will warn you in the console.

In two cases, it is easy for us to be tempted to modify the data in prop:

1. After Prop is passed in as the initial value, the subcomponent wants to Used as local data;

2. #Prop is passed in as raw data and processed by the sub-component into other data output.

The correct response to these two situations is:
Define a local variable and initialize it with the value of prop:

props: ['initialCounter'], data: function () { return { counter: this.initialCounter } }

Define a calculated property , process the value of prop and return:

props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }

Note that in JavaScript, objects and arrays are reference types, pointing to the same memory space. If prop is an object or array, changing it inside the child component will affect the parent component. status.

For example:

Picture: changing childObject.name, object.name also changes

Figure: Console output app3.object.name

4. Props verification

You can specify validation rules for props. If the incoming data does not meet the requirements, Vue will issue a warning.

See the official documentation for specific verification rules: Prop verification rules

5. $parent

$parent can also be used to access the data of the parent component.

And the child component can directly modify the data of the parent component through $parent without reporting an error!

When you can use props, try to use props to pass data explicitly (you can clearly and quickly see which data of the parent component is referenced by the child component).

On the other hand, it is a bad idea to modify the data of the parent component directly in the child component. The one-way data flow of props does not have this concern.

Related recommendations:

vue slot How to display the parent component in the child component and pass

vue's props to implement the child component Change with parent component

The above is the detailed content of How does a subcomponent in Vue get the value of its parent component? (props implementation). For more information, please follow other related articles on the PHP Chinese website!