关于父组件通过v-on接收子组件多个参数的一点研究
写组件的时候遇到一个需求,我需要在子组件向父组件传递信息
this.$emit('myEvent', 信息1, 信息2)
在父组件使用v-on来接收
<my-component @myEvent="handler"/>
这样就可以接收到子组件传递的信息1
和信息2
,easy。
handler(param1, param2){
console.log(param1, param2) // => 信息1, 信息2
}
但我需要在内联语句中传递一个额外参数,平时子组件只附带一个参数的时候,可以使用$event
<my-component @myEvent="handler('extra parameter', $event)"/>
但是$event只接收第一个参数,也就是这么写只能接收到信息1
handler(extra, param1, param2){
console.log(extra, param1, param2) // => 'extra parameter', 信息1, undefined
}
最后找到了一个解决办法
<my-component @myEvent="handler('extra parameter', arguments[0], arguments[1])"/>
可以获取到参数了
handler(extra, param1, param2){
console.log(extra, param1, param2) // => 'extra parameter', 信息1, 信息2
}
因为实际上这里的$event
就是arguments[0]
,下面这一段现在的vue文档上好像已经找不到了,但是arguments
还是可以用的
多提一句,当v-on
的参数是dom事件时,$event
代表的是原生的event
事件
以上
来源:https://segmentfault.com/a/1190000016107619
关于父组件通过v-on接收子组件多个参数的一点研究的更多相关文章
- vue组件通信&&v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...
- vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法
Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...
- Vue 父组件循环使用refs调用子组件方法出现undefined的问题
Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...
- Vue把父组件的方法传递给子组件调用(评论列表例子)
Vue把父组件的方法传递给子组件调用(评论列表例子) 效果展示: 相关Html: <!DOCTYPE html> <html lang="en"> < ...
- vue父组件异步传递prop到子组件echarts画图问题踩坑总结
效果图: 大致思路:考虑到5张图都是折线图,所以准备用一个子组件承接echarts画图,然后父组件通过prop传递不同数据来展示不同的图 踩坑问题: 1.引入line子组件,画了5个元素,但是只显示一 ...
- Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- 【VUE】7.组件通信(二)子组件修改父组件
1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
随机推荐
- HBase 数据坐标
- 使用DynamoShake从dynamodb迁移到mongodb
去年和今年年初,我们开源了MongoShake和RedisShake分别用于MongoDB和Redis的迁移.同步.备份等多种需求.最近,我们的shake系列又进一步壮大,我们推出了一款dynamod ...
- fileinput使用心得
下咋以及一些具体使用过程就不叙述了,简单说一下使用时候需要注意的几点 1.在js中封装好的fileinput函数 /* * 初始化fileInput控件(第一次初始化) * type 不同类别 * i ...
- Eureka Instance实例信息配置
Eureka包含四个部分的配置 instance:当前Eureka Instance实例信息配置 client:Eureka Client客户端特性配置 server:Eureka Server注册中 ...
- GUID 使用方法
GUID(全局统一标识符)是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的.通常平台会提供生成GUID的API.生成算法很有意思,用到了以太网卡地址.纳秒级时间.芯片ID码和许多可 ...
- 微信网页授权demo2
1.在微信公众号请求用户网页授权之前,开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改授权回调域名.请注意,这里填写的是 ...
- 2019阿里云开年Hi购季大促主会场全攻略!
2019阿里云云上采购季活动已经于2月25日正式开启,从已开放的活动页面来看,活动分为三个阶段: 2月25日-3月04日的活动报名阶段.3月04日-3月16日的新购满返+5折抢购阶段.3月16日-3月 ...
- 【html、CSS、javascript-5】css应用场景补充
一.CSS全局应用 父标签div下包含两个子标签div,当子标签dvi全部向左float,此时父标签设置的背景色是不显示的 <!DOCTYPE html> <html lang=&q ...
- 【xlwings1】多线程写入excel数据
#!/ufr/bin/env python # -*- coding:utf-8 -*- import xlwings as xw import queue import threading impo ...
- Java问题解读系列之基础相关---含继承时的执行顺序
今天来研究一下含继承.静态成员.非静态成员时Java程序的执行顺序: 一.不含继承,含有静态变量.静态代码块 创建一个子类,该类包含静态变量.静态代码块.静态方法.构造方法 /** * @create ...