像下面一些常用的修饰符一样.sync也是对方法的封装，是一种语法糖。
@click.stop="add"
@click.prevent="add"
@click.stop.prevent="add"
先抛出使用场景，如Vue使用组件方法的时候，引用一个组件然后给这个组件传入一个外部属性，如果组件内要对这个属性进行修改那么应该通知原组件修改避免多方参与使数据产生混淆。
首先，子组件不能直接修改父组件传递的 props
但子组件可以通过调用 $emit 来触发父组件事件，并传参
父组件可以通过 $event 获取到 $emit 的参数，从而修改父级属性
这种通信场景很常见，因此 Vue 封装了一个修饰符 .sync，从而省略监听 update:props 的代码
.sync 是一个语法糖，:props.sync = "xxx" 等价于 :props = "xxx" v-on:update:props="total = $event"
代码举例：比如在App.vue写如下代码,引入Child.vue组件，当Child.vue要对total改变的时候，通知App.vue进行修改。下面是不使用.sync的情况：
App.vue
<template>
<div class="app">
App.vue 我现在有 {{total}}
<hr>
<Child :money="total" v-on:update:money="total=$event" />
//$event是vue中临时存储地址，v-on监听$emit发出的useMoney状态变化执行total=$event实现total修改
</div>
</template>
<script>
import Child from "./Child.vue组件";//引入Child.vue组件
export default {
data() {
return { total: 10000 };
},
components: { Child: Child }
};
</script>
<style>
.app {
border: 3px solid red;
padding: 10px;
}
Child.vue
<template>
<div class="child">
{{money}}
<button @click="$emit('update:money', money-100)">
//点击触发$emit发出变化通知，money-100会传递给$event
<span>花钱</span>
</button>
</div>
</template>
<script>
export default {
props: ["money"]
};
</script>
<style>
.child {
border: 3px solid green;
}
</style>
页面：
使用.sybc直接对App.vue的如下监听部分进行修改：
<Child :money="total" v-on:update:money="total=$event" />
使用.sybc改后的代码：
<Child :money.sync="total"/>
以上简单的展示了.sybc的用法，它相当于一种语法糖。
