通常在父子组件间实现“双向绑定”时使用。
<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-model 是 v-bind:value 和 v-on:input 的语法糖(text 和 textarea 元素上是value值和input事件,具体参考Vue文档)。
在HTML标签上使用 v-model 时:
v-on:input="xxx.$event.target.value"
在组件上使用时:
v-on:input="xxx.$event"