Detailed explanation of the usage of sync modifier in Vue3 parent-child component parameter transfer

One-way data flow explanation

One-way data flow (the heap can be modified, the stack cannot be modified)

We all know that the data passed from parent to child is a one-way data flow, that is, the child component cannot directly modify the value passed by the parent component.

But in fact, for modifying values, the truth is: basic data types cannot be modified, complex data types do not modify the reference address (stack), and its value can be modified at will

Vue2.x usage

Define the form of the event to notify the parent component of the modification

That is the most basic usage: props+$emit

Writing method:

Use of .sync and update:

When the parent component passes the value, just add .sync after the variable;

The child component this.$emit("update:變量", 實參) can modify the value passed by the parent component;

Writing method:

Parent-to-child, shorthand for passing multiple data

If the value passed to the child component is multiple data, you can directly include multiple data in one object with the help of v-bind ;

Note: v-bind.sync="doc";

What is passed to the child component is not a doc object;

But every attribute in the object.

Writing method:

Use v-model abbreviation (strict requirements)

Parent component: v-model , Child component: The variable received must be value , and the event submitted by $emit must be input

Writing method:

Vue3.x usage

Using v-model , compared to 2.x, now multiple v-models can be used on a component, which is the usage of Vue2.x modifiers

Common usage

Use v-model when passing the parent component, and use emit("uodate: num", 實參) when modifying the child component

Writing method:

Abbreviation

When the variable passed from the parent component to the child component is named: modelValue , you can use this method

Writing method:

The above is the detailed content of the detailed explanation of the usage of the sync modifier in the parameter passing of Vue3 parent-child components. For more information about the parameter passing of Vue3 parent-child components, please pay attention to other related articles on 123WORDPRESS.COM!