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 3D球状导航的文章分类
Jul 06 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
JS中的进制转换以及作用
Jun 26 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
Vue监听滚动实现锚点定位(双向)示例
Nov 13 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
兼容PHP5的PHP目录管理函数库
2008/07/10 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
php导出生成word的方法
2015/12/25 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
关于JavaScript与HTML的交互事件
2013/04/12 Javascript
Javascript中replace()小结
2015/09/30 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
python实现从网络下载文件并获得文件大小及类型的方法
2015/04/28 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
python解释器spython使用及原理解析
2019/08/24 Python
Python super()方法原理详解
2020/03/31 Python
python模拟实现分发扑克牌
2020/04/22 Python
python如何实时获取tcpdump输出
2020/09/16 Python
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
会计主管岗位职责范文
2013/11/08 职场文书
2014年自我评价
2014/01/04 职场文书
运动会广播稿150字
2014/02/19 职场文书
大学生见习报告范文
2014/11/03 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers