对.sync的理解
单一对象
当需要对一个prop进行双向绑定,但不幸的是,真正的双向绑定会带来维护上的问题(控制台会提示不要直接修改prop),因为子组件可以变更父组件,且在父组件和子组件两侧都没有明显的变更来源
这时候我们会利用 $emit 来解决这一问题。通过在子组件监听属性的变化,然后发送事件给父组件,接着父组件绑定相应的事件。一旦子组件的属性发生变化,就触发父组件的事件。
具体实现是这样的:
针对dialogVisible,一旦子组件的dialogVisible发生改变,触发下面的事件handleClose
handleClose() {
this.dialogVisible = false
this.$emit("dialogVisible")
}
然后父组件在利用@dialogVisible="handleDialg"来触发事件handleDialog
<elDialog :visible="visible" @dialogVisible="handleDialog"/>
handleDialog() {
this.visible = false
}
- 而.asyc是他们的一个缩写,
父组件中:
<elDialog :visible.sync="visible"/>
子组件中的方法
handleClose() {
this.dialogVisible = false
<!-- update是必要的 -->
this.$emit("update:dialogVisible")
}
- 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=“doc.title + ‘!’” 是无效的)
针对多个对象
如果一个组件的多个prop都要实现双向绑定,只需要每个prop加sync修饰符
<elDialog :a.sync="value1" :b.sync="value2" :c.sync="value2" :d.sync="value2"></elDialog >
但这太麻烦了,当我们用一个对象同时设置多个prop的时候,也可以将这个.sync修饰符和v-bind 配合使用:
<text-document v-bind.sync="doc"></text-document>
这样会把 doc对象 中的每一个property(如 title) 都作为一个独立的 prop 传进去,然后各自添加用于更新的 v-on 监听器。