巧妙运用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 loading效果代码
Jun 18 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
javascript表达式和运算符详解
Feb 07 Javascript
JavaScript实现前端实时搜索功能
Mar 26 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
详解JavaScript 的变量
Mar 08 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
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
PHP使用GD库输出汉字的方法【测试可用】
2016/11/10 PHP
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
python实现的希尔排序算法实例
2015/07/01 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
python的多重继承的理解
2017/08/06 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
python内置模块collections知识点总结
2019/12/19 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
一套英文Java笔试题面试题
2016/04/21 面试题
大学生职业生涯规划书模板
2014/01/03 职场文书
校园安全广播稿
2014/02/08 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
《日月潭》教学反思
2014/02/28 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
七一建党日演讲稿
2014/09/05 职场文书
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
简单总结SpringMVC拦截器的使用方法
2021/06/28 Java/Android
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android