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 相关文章推荐
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
IE下js调试工具Companion.JS
Oct 15 Javascript
jQuery弹出(alert)select选择的值
Apr 21 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
js实现一个猜数字游戏
Mar 31 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
微信小程序实现animation动画
Jan 26 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 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
通过html表格发电子邮件
2006/10/09 PHP
可以在线执行PHP代码包装修正版
2008/03/15 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
Display SQL Server Version Information
2007/06/21 Javascript
动态刷新 dorado树的js代码
2009/06/12 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
使用SAE部署Python运行环境的教程
2015/05/05 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
迎元旦广播稿
2014/02/22 职场文书
施工单位安全责任书
2014/07/24 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
自我检讨书怎么写
2015/05/07 职场文书
唐山大地震的观后感
2015/06/05 职场文书
英语读书笔记
2015/07/02 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
Python中快速掌握Data Frame的常用操作
2021/03/31 Python