Vue数据双向绑定 .sync

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

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

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

如下面的代码：

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

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

 

子组件中，同样使用观察的方法：

watch:{

  moduleCode(val){

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

  }

}

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