浅析 Vue 修饰符 sync

Vue 修饰符 sync 是一个编译时的语法糖，功能：当一个子组件改变了一个 prop 的值时，这个变化也会同步绑定到父组件中。

我们知道Vue 有三条规则：

• 组件不能修改 props 外部数据
• this.$emit 可以触发事件并传参
• $event 可以获取 $emit 的参数

Vue 推荐以 update:myPropName 的模式触发事件取代真正的双向绑定。比如，在一个包含 title prop 的假设的组件中，可以用以下方法表达对其赋新值的意图：

this.$emit('update:title', newTitle)

然后父组件可以监听那个事件并根据需要更新一个本地的数据 property

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

可以使用 .sync 修饰符进行缩写

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

.sync 修饰符的 v-bind 不能和表达式一起使用 (例如以下代码是无效的)

v-bind:title.sync="doc.title + '!'"

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

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

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

 v-bind.sync=”{ title: doc.title }

在 Vue3 中，推荐使用 v-model 替代 sync