实现vue2父子组件之间数据的双向绑定

作者 likaiqiang 日期 2017-03-28
实现vue2父子组件之间数据的双向绑定

vue1与vue2之间的一个区别就是后者父子组件之间的数据流只能是父组件到子组件的单向数据流

vue1默认单向数据流,但是可以使用 .sync 绑定修饰符显式地强制双向。vue2取消了.sync,这意味着不能直接对父子组件实现双向数据绑定。

尽管这让vue组件之间的通信看起来不那么让人费解,但是业务上经常需要父子组件之间的双向数据绑定,怎么解决这个问题?可以使用v-model,就是说我们自己造一个v-model。

可以参考vue官方提供的一个例子

自定义组件v-model生效的两个条件

  • 接受一个 value 属性
  • 在有新的 value 时触发 input 事件

根据上面两个条件写一个demo

这种写法可以和props传递数据同时使用,我们改一改上面的demo

最后,总结一下

  • 单向数据流:父——>子,使用props。子——>父,使用$emit触发自定义事件,然后父组件监听。
  • 双向数据流:自己实现一个v-model。