好资源导航 » 文章资讯 » Vue父子组件双向绑定传值的实现方法

Vue父子组件双向绑定传值的实现方法

2023-09-09 14:30:04 61

父子组件之间的双向绑定非常简单，但是很多人因为是从Vue2+开始使用的，可能不知道如何双向绑定，当然最简单的双向绑定（单文件中）就是表单元素的v-model了，例如它会响应表单元素的value属性，当输入框文本改变时，会将value值传给v-model所绑定的变量，如果同时设置v-model和value，value属性无效。

父子组件的自定义双向v-model

当若干dom封装成组件时，在父组件中使用子组件时，却无法在子组件标签上使用v-model，因为子组件标签不是表单元素,这个时候，我们需要自定义我们想要的v-model规则。

你学会组件的自定义v-model了吗？如果是普通的表单元素，同理，监听表单的input或者change事件，实时将value或者checked通过$emit传递就可以了。

父子组件的自定义多个双向值

上述例子，是实现单个prop值的双向绑定，当组件的需求需要复杂的操作，需要多个双向值，是如何实现的呢。这里需要用到以前被vue抛弃，后来又回归的.sync修饰符。

事实上，这个比v-model更加简单

此处需要注意，虽然加上.sync即可双向绑定，但是还是要依靠子组件$emit去触发update:prop名实现修改父组件的变量值实现双向数据流，如果直接对prop的属性直接赋值，依然会出现报错。

事实上，.sync修饰符是一个简写，它做了一件事情

当需要把一个对象中的属性全部通过.sync传入双向数据流时，可以再简便一下写法

当使用这种写法时，会将obj对象中的所有属性都通过独立的props传递给子组件，并监听对应的update:，此时在子组件中也要声明对应的props。

总结

以上所述是小编给大家介绍的Vue父子组件双向绑定传值的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
514930285
czq8825@qq.com

Vue父子组件双向绑定传值的实现方法

{{msg}}

{{msg}}

随机推荐

Vue父子组件双向绑定传值的实现方法

{{msg}}

{{msg}}

热门推荐

随机推荐