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

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

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

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

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

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

<!-- .sync是 v-on:update这种模式的一种缩写 -->
<Child v-on:update:title="title" />
<!-- 相当于 -->
<Child :title.sync="title" />

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

使用 model 选项

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

<!-- 父组件 -->
<Model v-model="checked"/>

<!-- Model组件 -->
<div @click="handleClick">
  <p>自定义组件的 v-model</p>
  checked {{checked}}
</div>
<script lang="ts">
export default {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  methods: {
    handleClick() {
      this.$emit('change', !this.checked);
    }
  }

在上述代码中，只需要在 model 选项中添加 prop 和 event，就可以实现了 v-model。而在 Vue + TS 项目中 vue-property-decorator 中提供了 Model 的装饰器，需要这么写：

@Model('change', { type: Boolean }) readonly checked!: boolean
handleClick() {
  this.$emit('change', !this.checked);
}

只需要通过 .sync 和 model 就可以实现数据的“双向绑定”，这样书写代码可以一定程度上减少我们的代码，而且另代码变得更优雅且可维护。

看完了这篇文章，相信你对“vue如何实现数据的双向绑定”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！