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


Posted in Javascript onApril 07, 2019

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 得以更新

总结

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
jQuery maxlength文本字数限制插件
Apr 16 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
jquery实现聚光灯效果的方法
Feb 06 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
VUE前端cookie简单操作
Oct 17 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
js实现微信聊天界面
Aug 09 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
Apr 07 #Javascript
vue自定义指令directive的使用方法
Apr 07 #Javascript
浅谈express.js框架中间件(middleware)
Apr 07 #Javascript
详解vue中this.$emit()的返回值是什么
Apr 07 #Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 #Javascript
javascrit中undefined和null的区别详解
Apr 07 #Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 #Javascript
You might like
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
Yii rules常用规则示例
2016/03/15 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
php报错502badgateway解决方法
2019/10/11 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
javascript multibox 全选
2009/03/22 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
js删除局部变量的实现方法
2016/06/25 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
Python错误处理操作示例
2018/07/18 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
python解析含有重复key的json方法
2019/01/22 Python
利用Python查看微信共同好友功能的实现代码
2019/04/24 Python
python分数表示方式和写法
2019/06/26 Python
Python如何实现FTP功能
2020/05/28 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
结婚典礼证婚词
2014/01/11 职场文书
服务标语大全
2014/06/18 职场文书
国庆促销活动总结
2014/08/29 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
Python基本知识点总结
2022/04/07 Python
Promise静态四兄弟实现示例详解
2022/07/07 Javascript