Vue 的 .sync 修饰符

147 阅读1分钟

通常在父子组件间实现“双向绑定”时使用。

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

其实它是一个语法糖,在编译时会被扩展为一个自动更新父组件属性的 v-on 监听器。

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

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

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

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

需要注意的是,带有 .sync 修饰符的 v-bind 不能和表达式一起使用,只能提供你想要绑定的 property 名,类似 v-model

另外,v-modelv-bind:valuev-on:input 的语法糖(text 和 textarea 元素上是value值和input事件,具体参考Vue文档)。

在HTML标签上使用 v-model 时:

v-on:input="xxx.$event.target.value"

在组件上使用时:

v-on:input="xxx.$event"