小编给大家分享一下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如何实现数据的双向绑定”有了一定的了解，如果想了解更多相关知识，欢迎关注云搜网行业资讯频道，感谢各位的阅读！
