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

发布时间:2020-10-15 16:35:45 作者:蜗牛爬爬
来源:脚本之家 阅读:159

v-model介绍

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

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

如何巧妙利用 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" >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 得以更新

总结

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。

推荐阅读:
  1. 非父子组件间的传值
  2. vue 父子组件传值

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

v-model 父子组件 传值

上一篇:虚拟主机怎么选择配置

下一篇:WordPress 2.8新增哪些功能

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》