vue如何实现数据的双向绑定

小编给大家分享一下vue如何实现数据的双向绑定，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

实现数据的双向绑定，方便维护数据

有很多这样的场景，父组件需要传递数据给子组件，且在子组件触发数据更新的时候，马上反馈给父组件，父组件数据更新，单向数据流向子组件，最后子组件更新。通常情况用 props + $emit 的方式去更新状态，但是这种处理方式有点笨拙，且不易维护，所以可以通过实现数据的"双向绑定"来提高代码的可维护性。可以通过这以下方式去实现：

使用 .sync 实现 Prop 的"双向绑定"

在 v-bind prop的时候添加 .sync 修饰符，赋新值的时候用 this.$emit('update:propName', newValue)

如果要更新上述代码中的 title 值，只需要 this.$emit('update:title', '新标题')，完成数据更新。

使用 model 选项

model 是2.2.0+ 新增的选项，一个组件上的 v-model 默认会利用名为 value 的 Prop 和名为 input 的事件， 而 model 选项可以规定 Prop 名称和事件名称来实现 v-model，好处是在实现 v-model 的同时也避免了 Prop 和事件名的冲突。

  
自定义组件的 v-model
  checked {{checked}}