巧妙运用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 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
使用jquery读取html5 localstorage的值的方法
Jan 04 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
jQuery弹出div层过2秒自动消失
Nov 29 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
JavaScript流程控制(分支)
Dec 06 Javascript
让JavaScript代码更加精简的方法技巧
Jun 01 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多用户计数器代码
2007/03/11 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php遍历目录方法小结
2015/03/10 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
php实现评论回复删除功能
2017/05/23 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
使用js画图之圆、弧、扇形
2015/01/12 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
微信小程序 JS动态修改样式的实现代码
2017/02/10 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
vue跨域解决方法
2017/10/15 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
Python使用循环神经网络解决文本分类问题的方法详解
2020/01/16 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
比较一下entity bean和session bean
2013/12/27 面试题
启动一个线程是用run()还是start()
2016/12/25 面试题
校园安全标语
2014/06/07 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
安全生产年活动总结
2014/08/29 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
对外汉语教师推荐信
2015/03/27 职场文书
六五普法先进个人主要事迹材料
2015/11/03 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
优化Mysql查询的示例
2022/04/26 MySQL
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技