Vue父子组件的双向绑定

最新推荐文章于 2023-12-26 12:24:45 发布

转载最新推荐文章于 2023-12-26 12:24:45 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/prettypice/blog/1118864

文章标签：

#javascript #python #ViewUI

本文介绍了在Vue中实现父子组件双向数据绑定的两种方法：使用v-model绑定数据并通过value属性接收，在属性改变时触发父组件的input事件；利用.vue2.3新增的.sync修饰符，通过监听update事件修改props，简化了子组件向父组件传递数据的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

在vue中，父组件向子组件传递数据使用的是props，而子组件向父组件传递数据则只能靠事件来完成。在vue2中已经禁止了子组件直接修改父组件传入的数据，那么在不使用vuex的情况下如何实现子组件对于props的双向绑定呢？

有两个办法：

通过v-model向子组件绑定数据：在vue2中已经允许向组件绑定v-model，而不仅仅是表单元素。在vue文档中很清楚的说明了v-model是value属性和input事件的一个语法糖，所以我们可以在父组件中通过v-model向子组件传递数据，而在子组件中通过value属性来接收数据，在对应属性的改变事件中触发父组件的input事件，并且传入改变后的值，这样就完成了父子组件的双向绑定。

// 父组件
 <child v-model="val"></child>
// 子组件
<input :value="value" @change="handleChange($event)"></input>
props: ['value'],
methods: {
    handleChange(event) {
        this.$emit('input', event.target.value);
    }
}

通过.sync修饰符：vue2.3又增加了.sync修饰符来实现父子组件的双向数据绑定，.sync实际上就是一个update事件的语法糖，在props后面加上.sync修饰符后，vue会自动监听这个update事件来对props进行修改，实际上和v-model的原理是一样的，比如一个name的属性只需要在子组件中在修改name的时候调用this.$emit('update:name', val)即可

转载于:https://my.oschina.net/prettypice/blog/1118864