First, familiarize yourself with Vue rules:

  1. Components cannot directly modify props to modify external data. Instead, they need to issue requirements for external data to be received and modified by themselves.
  2. $emit can emit an event and pass parameters.
  3. The parameters of the emit

The.sync modifier has been reintroduced in Vue since version 2.3.0, but this time it only exists as a compile-time syntax sugar, which will be extended to a V-on listener that automatically updates parent component properties.

It is recommended to replace the schema triggering event with update:myPropName, for example:

// Emit publishes an update: money event < button@click ="$emit('update:money', 100)">
Copy the code

The parent component can then listen for that event and update a local data attribute as needed. Such as:

<Child :money v-on:"update:money"="total=$event"/>
Copy the code

That is, the parent subscribed to the event ‘Update :money’ via V-ON and could get the 100 and then choose to update its own data

Because such instances are common, the Vue authors simplify what the parent component receives as a.sync modifier

<Child :money.sync="total"<Child :money v-on:"update:money"="total=$event"/>
Copy the code

The.sync notation is called syntactic sugar.