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


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. ES6之主要知识点(十)Proxy

    Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程. Proxy 可以理解成,在目标对象之前架设一层“拦 ...

  2. STL与泛型编程-第一周笔记-Geekband

    1, 模板观念与函数模板 简单模板: template< typename T > T Function( T a, T b) {- } 类模板: template struct Obje ...

  3. dd- Linux必学的60个命令

    1.作用 dd命令用来复制文件,并根据参数将数据转换和格式化. 2.格式 dd [options] 3.[opitions]主要参数 bs=字节:强迫 ibs=<字节>及obs=<字 ...

  4. 乐观、悲观锁、redis分布式锁

    悲观锁总是假设最坏的情况,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会阻塞直到它拿到锁(共享资源每次只给一个线程使用,其它线程阻塞,用完后再把资源转让给 ...

  5. 矩阵快速幂2 3*n铺方格

    #include <iostream> #include <cstdlib> #include <cstring> #include <queue> # ...

  6. [转载] OpenCV2.4.3 CheatSheet学习(三)

    四.图像处理(呵呵,重头戏来了) 1. 滤波 filter2D() 用核函数对图像做卷积. sepFilter2D() 用分解的核函数对图像做卷积. 首先,图像的每一行与一维的核kernelX做卷积: ...

  7. select2下拉内容获取后台数据

    controller(id给select:text给另外的input框) @RequestMapping(value = "findUnit")public @ResponseBo ...

  8. docker启动redis设置密码

    docker run --name picker-redis -p 6379:6379 -d redis --requirepass "认证密码"

  9. css3之弹性盒模型(Flex Box)

    CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...

  10. springcloud:RPC和HTTP

    1.RPC和HTTP 无论是微服务还是SOA,都面临着服务间的远程调用.那么服务间的远程调用方式有哪些呢? 常见的远程调用方式有以下2种: RPC:Remote Produce Call远程过程调用, ...