In some cases we may need to “bidirectional bind” prop, but this can cause maintenance problems. The.sync modifier in Vue exists as syntactic sugar. It will be extended to a V-on listener that automatically follows the properties of the new parent component. The sample is as follows

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

Will be expanded to

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

The child component with the new money value needs to fire the event on the current instance, and the additional parameters are passed to the listener callback.

< button @ click = "$emit (' update: money, money - 100)" > < span > take money < / span > < / button >Copy the code

For details, see the following

App.vue

<template> <div class="app"> app.vue I now have {{total}} <hr> <Child :money.sync="total"></Child> <! -- <Child :money="total" v-on:update:money="total = $event"/>--> </div> </template> <script> import Child from "./Child"; export default { data() { return { total: 10000 }; }, components: { Child } }; </script> <style> .app { border: 3px solid red; padding: 10px; } </style>Copy the code

Child.vue

<div class="child"> {{money}} <div @click="$emit('update:money',money-100)"> </div> </template> <script> export default { props: ["money"] } </script> <style> .child { border: 1px solid red; padding: 10px; } </style>Copy the code

The reference comes from the vuu.sync modifier