vue修饰符sync的作用及原理
vue 2.3.0+ 版本新增了 .sync 修饰符。
其实就是一个编译时的语法糖。它会被扩展为一个自动更新父组件属性的 v-on
监听器。
示例代码如下:
<comp :foo.sync="bar"></comp>
1
会被扩展为:
<comp :foo="bar" @update:foo="val => bar = val"></comp>
1
当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:
this.$emit('update:foo', newValue)
1
注意
注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是,你只能提供你想要绑定的 property 名,类似 v-model。