Shulou(Shulou.com)06/02 Report--

This article mainly introduces what the parent component method is passed to by props in vue. It is very detailed and has certain reference value. Friends who are interested must read it!

In vue, props passes parent component methods (data) to child components. The parent component sends the value to the child component in the form of an attribute, and then the child component uses the property props to accept the value passed by the parent component.

The parent component passes a value to the child component:

Let's define it here. Relative to this case, App.vue is the parent component and Second-module.vue is the child component.

First, the value must be defined in the parent component and shared by all child components. So define the value in the data of the parent component:

Second, the parent component should have a common point with the child component: it is to invoke, register, and reference the child component in the parent component:

Call:

Registration:

Reference:

3. Next, you can bind the value of the parent component to the child component where the parent component and the child component are linked (that is, on the label that refers to the child component):

Here I bind two values, one is an array and the other is a string.

Pay special attention to:

Generally speaking, the parent passes on the child in these three steps: defining the value in the parent component, invoking the child component and referencing it, and passing the value to the child component on the referenced tag.

But note that you need to use v-bind: bind the value to be passed, and put the value directly on the tag without v-bind, which will be parsed as a node attribute of html.

Finally, the child component must accept the value passed by the parent component: props (props) to receive:

Another way to receive: pay attention to the use of string packages here, and step on the hole here.

For the specific receiving method, see the official documents.

Fifth, in this way, the value of the parent component can be used directly inside the child component.

But there are points to pay attention to:

The values of parent components accepted by child components can be divided into two types: reference type and normal type.

Common types: string (String), number (Number), Boolean value (Boolean), null (Null)

Reference type: array (Array), object (Object)

Among them, the normal type can be changed in the child component and will not affect the values from the parent component that are also called in other sibling child components.

However, when the value of the reference type is modified in the child component, the value of the parent component will also be modified, and as a result, the internal values of other child components that also reference the changed value will also be modified. Unless you have special requirements to do so, it is best not to do so.

The value passed from the parent component to the child component must not be modified in the child component, because its data is common, and all referenced child components will be changed.

First, take a look at an effects page:

The list bar on the left is the first child component that references the parent component value, and on the right is the second child component that references the same value, and they all have the same information:

There are also six obvious pieces of data in the development tools:

Pay attention to the comparison of the last piece of data: after clicking the first blue button in the right area, there is one less set of data, of course, on both sides.

Also look at the development tools, the App component of the data is missing one.

But when strings, numbers, and Boolean values are passed, modifications in one component will not affect the information of other components. It doesn't matter.

When I click the second blue button, only the title in the second subcomponent has changed, and the first component has not changed.

After trying, the value did change, but vue gave me a warning:

Warning: avoid making direct modifications to a prop, as the value will be overwritten when the parent component is re-rendered. Instead, use pillar-based data or calculation attributes.

According to the official website:

That's all of the article "what does props pass parent component methods to in vue?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.