关于父组件通过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:子组件在自身标签上,使用自定义的属性来接收外界 ...
随机推荐
- vim 插入行号
:let i=1000000|g/^/s//\=i.' '/|let i=i+1
- Java学习笔记 - 类方法与代码块的执行顺序
类的初始化顺序 使用一个简单的父子类例子来做示范,代码执行顺序在代码后有标注. class Parent { public static String p_StaticField = "父类 ...
- Python - 基本数据类型及其常用的方法之列表
列表: 特点:用 [] 括起来,切元素用逗号分隔:列表内的元素可以为任何的数据类型. 列表的基本操作: 1.修改 li = [12, 5, 6, ["Aiden", [2, 4], ...
- leetcode 699. Falling Squares 线段树的实现
线段树实现.很多细节值得品味 都在注释里面了 class SegTree: def __init__(self,N,query_fn,update_fn): self.tree=[0]*(2*N+2) ...
- Hibernate-概述-搭建-测试-配置详解
一 hibernate概述 1.1 框架是什么 1.框架是用来提高开发效率的 2.封装了好了一些功能.我们需要使用这些功能时,调用即可.不需要再手动实现. 3.所以框架可以理解成是一个半成品的项目.只 ...
- LINUX对于未安装的软件包的查看
查看的前提是您有一个.rpm 的文件,也就是说对既有软件file.rpm的查看等: 1.查看一个软件包的用途.版本等信息: 语法: rpm -qpi file.rpm 举例: [root@localh ...
- LINUX用户身份切换
Su 命令作用 su的作用是变更为其它使用者的身份,超级用户除外,需要键入该使用者的密码. 使用方式 su [-fmp] [-c command] [-s shell] [--help] [--ver ...
- Redis源码解析:18Hiredis同步API和回复解析API代码解析
Redis的sentinel模式使用了Hiredis代码,Hiredis是redis数据库一个轻量级的C语言客户端库.它实现的向Redis发送命令的API函数redisCommand,使用方法类似于p ...
- 告别诊断烦恼 | 应用实时监控 ARMS 上线智能和实时诊断功能
为什么要做这个功能? 作为一款应用性能监控产品,我们通常会给用户展示两类数据: 第一种是统计数据:用户通过使用统计数据设置报警(比如应用响应时间大于2s),缩小问题范围(比如报警时间范围内,是哪一个接 ...
- H5C3--媒体查询(向上兼容,向下覆盖),link中引入的ont and only
一.使用 实例: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...