好资源导航 » 文章资讯 » 巧妙运用v-model实现父子组件传值的方法示例

巧妙运用v-model实现父子组件传值的方法示例

2023-08-24 23:12:05 50

v-model介绍

熟悉Vue的小伙伴们都知道v-model是Vue的一个很大的特色，可以实现双向数据绑定。但本质上呢，它不过是语法糖，它负责监听用户的输入事件以更新数据。
以下摘取自Vue官方文档

v-model在内部使用不同的属性为不同的输入元素并抛出不同的事件：

text和textarea使用value属性和input事件；
checkbox和radio使用checked属性和change事件；
select字段将value作为prop并将change作为事件。

如何巧妙利用v-model实现父子组件传值

通常子组件某个变量更新，并需要告知父组件时，需要子组件触发事件并父组件监听该事件。

但是熟悉上面v-model的实现原理后，我们可以巧妙地运用这一原理（v-model在内部使用不同的属性为不同的输入元素并抛出不同的事件）。

方法总结：

1.子组件设value为props属性，并且不主动改变value值
2.子组件通过this.$emit('input','updateValue')将updateValue值传给父组件
3.父组件通过v-model="localValue"绑定一个本地变量，即可实现子组件value值与父组件updateValue值同步更新

举例

子组件

子组件，包含一个button，并且将value属性设为props（因为v-model使用的是value属性）。

点击button时，sum值加1，同时通过this.$emit('input',++sum)将更新后的值传给父组件（前提：传给父组件的值一定是你想赋给value的）

父组件

父组件中，通过v-model绑定一个本地变量，即可实现子父组件同步更新



value:{{rangeValue}}

实际上，这个过程是首先子组件通过$emit('input')更新父组件的本地变量，然后子组件中的value属性通过props得以更新

总结

这种方式尤其适合子父组件传参的情况（子父组件同步更新）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

巧妙运用v-model实现父子组件传值的方法示例

热门推荐

随机推荐