巧妙运用v-model实现父子组件传值的方法示例
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 的）
<template>
<div>
<button @click="increase" style="border: 1px solid black">increase</button>
</div>
</template>
<script>
let sum = 0
export default {
name: 'vmodel',
props: {
value: {
type: Number,
default: 0
}
},
methods: {
increase () {
this.$emit('input', ++sum)
console.log('value1', this.value)
setTimeout(() => {
console.log('value2', this.value)
}, 50)
}
}
}
</script>
父组件
父组件中，通过 v-model 绑定一个本地变量，即可实现子父组件同步更新
<div>
<increase v-model="rangeValue"></increase>
<p>value:{{rangeValue}}</p>
</div>
<script>
data () {
return {
rangeValue: 0
}
}
</script>
实际上，这个过程是首先子组件通过 $emit('input') 更新父组件的本地变量，然后子组件中的 value 属性通过 props 得以更新
总结
这种方式尤其适合子父组件传参的情况（子父组件同步更新）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue3+vite+tdesign实现日历式可编辑的排课班表填写功能
本文介绍了如何使用Vue3和tdesign实现一个日历式、可编辑的排班填写功能,开发过程中面临了年份和月份下拉框的实现、周期显示以及可编辑日历的样式和数据获取等挑战,感兴趣的朋友一起看看吧2025-01-01
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。本文将从CSS过渡transition、CSS动画animation及配合使用第三方CSS动画库(如animate.css)这三方面来详细介绍Vue过渡效果之CSS过渡2020-02-02
这篇文章主要介绍了解决vue过滤器filters获取不到this对象的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
这篇文章主要介绍了仿vue-cli搭建属于自己的脚手架的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要给大家介绍了关于v-model及其修饰符的相关资料,v-model指令有三个可以选用的修饰符：.lazy、.number以及.trim,本文通过示例代码介绍的非常详细,需要的朋友可以参考下2021-11-11
这篇文章主要介绍了Vue中的MVVM模式使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了vue2.x 对象劫持的原理实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了vue elementui form表单验证的实现,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了vue项目百度地图如何自定义标注marker问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue 2.5.2下axios + express 本地请求404的解决方法
下面小编就为大家分享一篇Vue 2.5.2下axios + express 本地请求404的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
最新评论