First, take a look at the vUE rules

  1. The component cannot modify external data for props
  2. This.$emit can emit events and pass parameters
  3. Event can get event can get the emit parameter

In a component containing a title prop hypothesis, we can express the intent to assign a new value to it as follows:

this.$emit('update:money',new money)
Copy the code

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

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

The.sync modifier is used to abbreviate this mode for convenience

<Child :money.sync="total.money"></Child>
Copy the code

It is worth noting that v-bind with the.sync modifier cannot be used with expressions (e.g. V-bind :money.sync= “total.money + ‘! ‘” is invalid).

The sync modifier can also be used in conjunction with v-bind when setting multiple prop with one object

<Child v-bind.sync="total"></Child>
Copy the code

This will pass in each property (such as money) in the Total object as a separate prop, and then add the respective V-on listeners for updates.

To sum up

:money. Sync =”total” equivalent to :money=”total” V-on :update:money=”total=$event”