在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。
这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。举个例子,在一个包含 title prop 的假设的组件中,我们可以用以下方法表达对其赋新值的意图:
this.$emit('update:title', newTitle)
然后父组件可以监听那个事件并根据需要更新一个本地的数据属性。例如:
<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
>
</text-document>
为了方便起见,我们为这种模式提供一个缩写,即 .sync 修饰符:
<text-document v-bind:title.sync="doc.title"></text-document>
使用场景:封装el-dialog时双向绑定visible
- 子组件
<template>
<el-dialog class="dialog-group" :visible.sync="showDialog">
</template>
<script>
export default {
name: "dialog-group",
props: {
visible: {
type: Boolean,
default: false
}
},
data: function(){
return {
showDialog: this.visible
}
},
watch: {
showDialog: function() {
this.$emit("update:visible", this.showDialog);
},
visible: function() {
this.showDialog = this.visible;
}
}
}
</script>
- 父组件
<dialog-group
:visible.sync="showGroupDialog"
:title="groupDialogTitle"
:group-name="groupDialogName"
>
</dialog-group>
element的dialog本身提供了.sync进行数据双向绑定,子组件的showDialog在dialog关闭时变为false,需要emit事件来更新父组件的值。
showDialog赋值为 props 中的visible,visible下次更新时data不会自动更新,所以需要watch它来更新showDialog控制dialog的显示