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 查找新建元素代码
Jul 06 Javascript
页面使用密码保护代码
Apr 10 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
基于canvas实现手写签名(vue)
May 21 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函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
2018/01/21 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
Python实现读取json文件到excel表
2017/11/18 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
德国机车企业:FC-Moto
2017/10/27 全球购物
纽约手袋品牌:KARA
2018/03/18 全球购物
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
最经典的商业地产项目广告词
2014/03/13 职场文书
javascript之Object.assign()的痛点分析
2022/03/03 Javascript