.sync 修饰符
官方解释：我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。事实上就是组件不能直接修改 props 外部的数据，强行修改外部数据会引起报错，所以需要在子组件中改变 props 的属性值并更新到父组件中，就会使用到 .sync。本质上 .sync 就是一个语法糖。
简单示例
在 Vue 中，有几个约定的规则：
- 组件不能直接修改 props 外部数据
$emit可以触发当前实例上的事件，并且传递参数给监听器回调。$event可以获取$emit的参数。
<button @click="money-=100">
<span> 花了 100</span>
</button>
复制代码子组件使用 $emit 触发事件，可以写成
<button @click="$emit ('update:money',money-100)"></button>
复制代码父组件使用 $event 接收传递的参数，获取子组件事件的结果。
<child :money="total" v-on:update:money="total = $event" />
复制代码使用 .sync 之后
<child :money.sync="total" />
复制代码v-model 与 .sync 的区别
都是用来实现父子组件之间的数据双向通信，但是 v-model 常用于表单元素，也就是输入类元素，input，单选多选框，select框，多行输入等，.sync 常用于子组件数据改变通过 props 传递更新到父组件中，所以，.sync 不限制标签。