巧妙运用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 相关文章推荐
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
详解webpack-dev-server的简单使用
Apr 02 Javascript
angular第三方包开发整理(小结)
Apr 19 Javascript
JavaScript设计模式之单例模式简单实例教程
Jul 02 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
微信小程序实现签到弹窗动画
Sep 21 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
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采集时被封ip的解决方法
2010/08/29 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
PHP动态输出JavaScript代码实例
2015/02/12 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
javascript下拉列表菜单的实现方法
2015/11/18 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
Vue利用History记录上一页面的数据方法实例
2018/11/02 Javascript
Seajs源码详解分析
2019/04/02 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python实用日期时间处理方法汇总
2015/05/09 Python
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
Python中一行和多行import模块问题
2018/04/01 Python
利用python如何处理nc数据详解
2018/05/23 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
以思科路由器为例你写下单臂路由的配置命令
2013/08/03 面试题
车祸赔偿收入证明
2014/01/09 职场文书
《在大海中永生》教学反思
2014/02/24 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
教师节老师寄语
2015/05/28 职场文书
python 爬取华为应用市场评论
2021/05/29 Python
详解Python中*args和**kwargs的使用
2022/04/07 Python