Vue数据双向绑定 .sync

在以前我们希望组件之间实现双向绑定,即将父组件的值传给子组件,而后又在子组件中更新该值,并传递回给父组件,是比较麻烦的一件事。

按照一般的方式,我们是通过在子组件中抛出一个事件,同时在父组件写一个方法接收并更新,实在是麻烦。

现在有了一种更简便的方法,直接使用 .sync 来实现。

如下面的代码:


<db-component-demo :moduleCode.sync="moduleCode"></db-component-demo>

在原本的绑定上,添加.sync

子组件中,同样使用观察的方法:


watch:{

  moduleCode(val){

    this.$emit("update:moduleCode",val)

  }

}

通过这种方式,当子组件的moduleCode有改变时,就可以直接更新到父组件中了。

猜你喜欢

转载自blog.csdn.net/qq_27840695/article/details/85209576