写组件的时候遇到一个需求,我需要在子组件向父组件传递信息


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接收子组件多个参数的一点研究的更多相关文章

  1. vue组件通信&&v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)

    组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...

  2. vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法

    Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...

  3. Vue 父组件循环使用refs调用子组件方法出现undefined的问题

    Vue 父组件循环使用refs调用子组件方法出现undefined的问题 1. 背景 最近前端项目遇到一个问题,我在父组件中使用了两个相同的子组件child,分别设置ref为add和update.其中 ...

  4. Vue把父组件的方法传递给子组件调用(评论列表例子)

    Vue把父组件的方法传递给子组件调用(评论列表例子) 效果展示: 相关Html: <!DOCTYPE html> <html lang="en"> < ...

  5. vue父组件异步传递prop到子组件echarts画图问题踩坑总结

    效果图: 大致思路:考虑到5张图都是折线图,所以准备用一个子组件承接echarts画图,然后父组件通过prop传递不同数据来展示不同的图 踩坑问题: 1.引入line子组件,画了5个元素,但是只显示一 ...

  6. Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  8. 【VUE】7.组件通信(二)子组件修改父组件

    1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...

  9. Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

随机推荐

  1. VC窗体透明而控件不透明以及Static文本背景透明方法

    出自http://my.oschina.net/ypimgt/blog/60951 优点:    1.Dialog 窗体完全透明.     2. 窗体上的控件不透明. DC 绘制的图形不透明.     ...

  2. np一些基本操作1

    ##生成一个一维数组import numpy as np;nb7 = np.arange(0,100,2);print(nb7)print("======================== ...

  3. 深度残差网络——ResNet学习笔记

    深度残差网络—ResNet总结 写于:2019.03.15—大连理工大学 论文名称:Deep Residual Learning for Image Recognition 作者:微软亚洲研究院的何凯 ...

  4. Windows API 第17篇 GetLogicalDriveStrings 获取本机所有逻辑驱动器,以根目录的形式表示

    函数原型:DWORD GetLogicalDriveStrings(  DWORD nBufferLength,  // size of buffer                          ...

  5. github的账号密码 redis windows版连接方式

    账号:Pinshuducha 邮箱:java_zhoulu@163.com 密码:zhoulu1994 服务器端: 启动:redis-server.exe redis.windows.conf 客户端 ...

  6. Life of Pi

    ·when you look into his eyes,you are seeing your own emotionsreflected back at you,nothing else. ·Go ...

  7. Leetcode162. Find Peak Element寻找峰值

    示例 2: 输入: nums = [1,2,1,3,5,6,4] 输出: 1 或 5 解释: 你的函数可以返回索引 1,其峰值元素为 2:   或者返回索引 5, 其峰值元素为 6. 说明: 你的解法 ...

  8. es6模块化规则(一)

    抄自阮一峰ECMAScript 6 入门 export命令 模块功能主要由两个命令构成:export和import.export用于规定模块的对外接口,import用于引入其他模块提供的方法功能. 一 ...

  9. windows--"git安装" 及 "使用git上传项目到github" 详细步骤

    一.下载安装包 https://git-for-windows.github.io/(放在任何一个你想放的地方(系统盘或非系统盘)). 二.开始安装 很简单,双击安装包,一直next下去,到了安装的最 ...

  10. hystrix熔断器

    在一个具有多服务的应用中,假如由于其中某一个服务出现问题,导致响应速度变慢,或是根本没有响应返回,会导致它的服务消费者由于长时间的等待,消耗尽线程,进而影响到对其他服务的线程调用,进而会转变为整个应用 ...