VUE子组件向父组件传值详解(含传多值及添加额外参数场景)


Posted in Javascript onSeptember 01, 2020

一、子组件向父组件传递一个值

子组件:

this.$emit('change', this.value);

父组件:

<!-- 在父组件中使用子组件 -->
<editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange($event)" />
// 事件处理函数
async costPlannedAmountChange(value) {
	console.log(value)
}

在使用子组件时,绑定change函数的事件处理函数也可以写成如下格式:

<editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange" />

绑定事件处理函数时,可以不带括号,形参则默认为事件对象,如果绑定时带上了括号,再想使用事件对象则需要传入$event作为实参。

二、子组件向父组件传递一个值,并携带额外参数

record为额外参数( 本文的额外参数都拿record做举例 )。

子组件:

this.$emit('change', this.value);

父组件:

<!-- 插槽 -->
<template slot="planned_amount" slot-scope="text, record">
 <!-- 在父组件中使用子组件 -->
 <editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange(record,$event)" />
</template>
// 事件处理函数
async costPlannedAmountChange(record,value) {
 console.log(record,value)
},

绑定事件处理函数时,record和$event的顺序不做要求,但是按照vue事件绑定的习惯,$event通常放在实参列表末尾。

三、子组件向父组件传递多个值

子组件:

// 向父组件传递了两个值
this.$emit('change', this.value,this.text);

父组件:

<editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange" />
// 事件处理函数
async costPlannedAmountChange(param1,param2) {
  console.log(param1,param2)
},

绑定事件处理函数时,不能携带括号!!!如果携带括号并且在括号内加了$event,只能拿到子组件传递过来的第一个参数。

四、子组件向父组件传递多个值,并携带额外参数

record为额外参数( 本文的额外参数都拿record做举例 )。

子组件:

// 向父组件传递了两个值
this.$emit('change', this.value,this.text);

父组件:

<template slot="planned_amount" slot-scope="text, record">
 <!-- 在父组件中使用子组件 -->
  <editable-cell :text="text" :inputType="inputType" @change="costPlannedAmountChange(record,arguments)" />
</template>
// 事件处理函数
async costPlannedAmountChange(record,args) {
  console.log(record,args)
},

arguments是方法绑定中的一个关键字,内部包括了所有方法触发时传递过来的实参。arguments和额外参数的位置谁先谁后不做要求,建议arguments放后面。

查看args的打印结果:

VUE子组件向父组件传值详解(含传多值及添加额外参数场景)

总结

到此这篇关于VUE子组件向父组件传值(含传多值及添加额外参数场景)的文章就介绍到这了,更多相关VUE子组件向父组件传值内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
May 12 Javascript
jcrop基本参数一览
Jul 16 Javascript
Javascript 多浏览器兼容总结(实战经验)
Oct 30 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
JavaScript函数的调用以及参数传递
Oct 21 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
Vue精简版风格概述
Jan 30 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
JS变量提升及函数提升实例解析
Sep 03 Javascript
vue离开当前页面触发的函数代码
Sep 01 #Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
Sep 01 #Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 #Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 #Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 #Javascript
vue路由切换时取消之前的所有请求操作
Sep 01 #Javascript
jQuery实现动态加载瀑布流
Sep 01 #jQuery
You might like
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
zend framework重定向方法小结
2016/05/28 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
python练习程序批量修改文件名
2014/01/16 Python
python列表操作使用示例分享
2014/02/21 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
Python如何实现单例模式
2016/06/03 面试题
如何定义一个可复用的服务
2014/09/30 面试题
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
工程监理应届生求职信
2013/11/09 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
谢师宴邀请函
2015/02/02 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
Oracle 区块链表创建过程详解
2021/05/15 Oracle
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS