Vue的.sync 修饰符

.sync修饰符的作用是父组件和子组件属性之间形成双向绑定，像v-model一样。
但是v-model每个标签只能有一个，如果组件中有多个属性需要和父组件之间的属性建立双向绑定关系这就用到了.sync。
本质上差不多。
v-model：

<!--v-model写法-->
<my-component type="text" v-model="value">
<!--编译后的写法-->
<my-component type="text"
  :value="value"
  @input="value = $event.target.value"
>

.sync

<!--语法糖.sync-->
<my-component :value.sync="value" />
<!--编译后的写法-->
<my-component 
  :value="msg" 
  @update:value="(val) => value = val"
>

如果v-model改变默认的响应函数为update就基本和sync一样了。

注意事项

组件中

this.$emit('update:title', newTitle)//这里的 update： 固定写法不能改

绑定对象

当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用：

<text-document v-bind.sync="doc"></text-document>

这样会把 doc 对象中的每一个属性 (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。

将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。

我的理解就是单个属性的对象是不会被解析的。