在以前我们希望组件之间实现双向绑定,即将父组件的值传给子组件,而后又在子组件中更新该值,并传递回给父组件,是比较麻烦的一件事。
按照一般的方式,我们是通过在子组件中抛出一个事件,同时在父组件写一个方法接收并更新,实在是麻烦。
现在有了一种更简便的方法,直接使用 .sync 来实现。
如下面的代码:
<db-component-demo :moduleCode.sync="moduleCode"></db-component-demo>
在原本的绑定上,添加.sync
子组件中,同样使用观察的方法:
watch:{
moduleCode(val){
this.$emit("update:moduleCode",val)
}
}
通过这种方式,当子组件的moduleCode有改变时,就可以直接更新到父组件中了。