什么时候可以用sync修饰符
看下面一个案例：
爸爸通过props向子组件传一个外部数据，告诉他自己有多少钱total。
当儿子要花钱的时候，注意不能直接在子组件里进行修改，因为这是外部数据。
正确做法应该是通知父亲，让父亲给钱，而不能自己把数据修改了。
于是子组件通过这段代码<button @click="$emit('update:money', money-100)">触发一个花钱事件，通知父亲需要多少钱。
同时，父组件应该监听这个事件， <Child :money="total" v-on:update:money="total = $event"/>。
当父亲得到儿子的通知时，才能决定是否打钱，而$event中存的就是儿子需要多少钱，用来获取$emit中的参数。
//App.vue
<template>
<div class="app">
App.vue 我现在有 {{total}}
<hr>
<Child :money="total" v-on:update:money="total = $event"/>
<Child :money.sync="total"/> //等价于上面的代码，相当于语法糖
</div>
</template>
<script>
import Child from "./Child.vue";
export default {
data() {
return { total: 10000 };
},
components: { Child: Child }
};
</script>
<style>
.app {
border: 3px solid red;
padding: 10px;
}
</style>
//Child.vue
<template>
<div class="child">
{{money}}
<button @click="$emit('update:money', money-100)">
<span>花钱</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"]
};
</script>
<style>
.child {
border: 3px solid green;
}
</style>
这就是一个很典型的==对象间通信==的案例。
此时使用.sync修饰符可以起到语法糖的效果。
<Child :money.sync="total"/> 与<Child :money="total" v-on:update:money="total = $event"/>等价。
总结
当一个子组件想要改变一个外部数据props传入的值时，应该通过$emit触发修改事件通知父组件，而父组件通过v-on进行监听，并自行修改。
==注意==不能在子组件中自行修改，否则会引发异步问题。
此时可以使用.sync修饰符，使这个变化也会同步到父组件中，起到语法糖的效果。
