看一个代码示例：
父组件：App.vue
<template>
<div class="app">
App.vue 我现在有 {{ total }}
<hr>
<!-- $event 为 $emit 发射出来的参数 update:money 就是事件名，推荐命名法-->
<Child :money="total" v-on:update:money="total = $event" />
<!-- 上面等价于下面这句， .sync修饰符 -->
<!-- <Child :money.sync="total" /> -->
</div>
</template>
<script>
import Child from "./Child.vue"; //这里引入子组件
export default {
data() {
return { total: 10000 };
},
components: { Child: Child },
};
</script>
子组件：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>
从这些代码案例中可以看出：
.sync修饰符只是将 <Child :money="total" v-on:update:money="total=$event" />替换为<Child :money.sync="total" /> 只是将语法简化。
注意：money.sync="total",这个绑定的属性名money一定要和子组件发送的事件名匹配，即发送的事件名为update:money。
如果父组件绑定的属性是xxx.sync = 'yyy'，则子组件为@click="$emit('update:xxx', money-100)" 。
为什么需要提供这种简化呢？
从vue官方文档关于.sync介绍中，提出了一个问题，那就是关于数据双向绑定会带来维护上的问题，因为子组件可以变更父组件数据，这种情况是不被允许的。
所以推荐在子组件中通过$emit('update:money', money-100) 发射出一个事件，在父组件中捕捉到该事件，然后通过父组件本身去修改数据。
为了明确区分出这类情况，vue提供了.sync修饰符，让子组件改变父组件状态的代码更容易被区分开来。
总结. sync 修饰符用处；
1、语法上的优化。
2、让子组件改变父组件状态的代码更容易被区分开来。
