关于父组件通过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:子组件在自身标签上,使用自定义的属性来接收外界 ...
随机推荐
- VC窗体透明而控件不透明以及Static文本背景透明方法
出自http://my.oschina.net/ypimgt/blog/60951 优点: 1.Dialog 窗体完全透明. 2. 窗体上的控件不透明. DC 绘制的图形不透明. ...
- np一些基本操作1
##生成一个一维数组import numpy as np;nb7 = np.arange(0,100,2);print(nb7)print("======================== ...
- 深度残差网络——ResNet学习笔记
深度残差网络—ResNet总结 写于:2019.03.15—大连理工大学 论文名称:Deep Residual Learning for Image Recognition 作者:微软亚洲研究院的何凯 ...
- Windows API 第17篇 GetLogicalDriveStrings 获取本机所有逻辑驱动器,以根目录的形式表示
函数原型:DWORD GetLogicalDriveStrings( DWORD nBufferLength, // size of buffer ...
- github的账号密码 redis windows版连接方式
账号:Pinshuducha 邮箱:java_zhoulu@163.com 密码:zhoulu1994 服务器端: 启动:redis-server.exe redis.windows.conf 客户端 ...
- Life of Pi
·when you look into his eyes,you are seeing your own emotionsreflected back at you,nothing else. ·Go ...
- Leetcode162. Find Peak Element寻找峰值
示例 2: 输入: nums = [1,2,1,3,5,6,4] 输出: 1 或 5 解释: 你的函数可以返回索引 1,其峰值元素为 2: 或者返回索引 5, 其峰值元素为 6. 说明: 你的解法 ...
- es6模块化规则(一)
抄自阮一峰ECMAScript 6 入门 export命令 模块功能主要由两个命令构成:export和import.export用于规定模块的对外接口,import用于引入其他模块提供的方法功能. 一 ...
- windows--"git安装" 及 "使用git上传项目到github" 详细步骤
一.下载安装包 https://git-for-windows.github.io/(放在任何一个你想放的地方(系统盘或非系统盘)). 二.开始安装 很简单,双击安装包,一直next下去,到了安装的最 ...
- hystrix熔断器
在一个具有多服务的应用中,假如由于其中某一个服务出现问题,导致响应速度变慢,或是根本没有响应返回,会导致它的服务消费者由于长时间的等待,消耗尽线程,进而影响到对其他服务的线程调用,进而会转变为整个应用 ...