.sync is used when the parent passes values to the child. I’ve seen this modifier used in other places before, and I’ll look at it in detail today.

// Parent <funnel-chart :chart-type.sync="chartType"/> // Child component this.$emit('update:chartType'.type);
Copy the code

In the past, the parent component used $emit to send values.

In some cases, we may need to “bidirectional bind” a prop (a property where parent and child components pass data).

The functionality provided by the.sync modifier in vue 1.x. When a child component changes the value of a prop with.sync, the change is also synchronized to the value bound in the parent component. This is convenient, but it can also cause problems because it disrupts the one-way data flow. (Data flows from top to bottom, events move from bottom to top)

Because the code for a child component to change a prop is no different from the code for a normal form modification, when you look at the code for a child component, you have no idea that it has quietly changed the state of the parent component.

This can lead to high maintenance costs when debugging applications of complex structures. We removed.sync in Vue 2.0.

In practice, however, we have found that.sync has applications, such as developing reusable component libraries.

All we need to do is make it easier to distinguish code that changes the state of a parent component from a child component.

As of Vue 2.3.0, we reintroduced the.sync modifier, but this time it only existed as a compile-time syntactic sugar. It is automatically extended as a V-ON listener that automatically updates the parent component’s properties.

<funnel-chart :chart-type.sync="chartType"/> // will be expanded to <funnel-chart :chart-type="line" @update:chart-type="val =>line = val"/>
Copy the code