.sync修饰符
一个组件上只能定义一个v-model,如果其他prop也要实现双向绑定的效果该怎么办呢? 简单的方法是子组件向父组件发送一个事件,父组件监听该事件,然后更新prop。具体如下:
// info.vue组件定义了一个value 属性, 和一个valueChanged事件
<input @input=“onInput” :value=“value”/>
父组件index.vue
上述写法太麻烦了,通过.sync可以简化上面代码,只需要修两个地方:
组件内触发的事件名称以“update:myPropName”命名,相应的上述info组件改为 update:value
父组件v-bind:value 加上.sync修饰符,即 v-bind:value.sync
这样父组件就不用再手动绑定@update:value事件了。
用法1: v-bind:prop.sync=“propvalue”
// info.vue组件
…
methods: {
onInput(e) {
this.$emit(“update:value”, e.target.value)
}
}
// index.vue组件
注意:
带有.sync修饰符的v-bind不能喝表达式一起使用(例如 v-bind:title.sync = "doc.title + ‘!’"是无效的)。取而代之的是,你只能你想要绑定的属性名。