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


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. Vue配置多个跨域目标链接

    参考: https://segmentfault.com/a/1190000016199721 1.通过使用的http-proxy-middleware来实现跨域代理 devServer: { dis ...

  2. Luogu P3835 【模板】可持久化平衡树(fhq Treap)

    P3835 [模板]可持久化平衡树 题意 题目背景 本题为题目普通平衡树的可持久化加强版. 题目描述 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作(对于各个以往的历史版本 ...

  3. mysql备份时的快照原理

    实际上实验的结果表明,这里的 the first such read指的是:对同一个表或者不同表进行的第一次select语句建立了该事务中一致性读的snapshot. 其它update, delete ...

  4. leetcode算法题笔记|two sum

    题目: 我的答案: /** * @param {number[]} nums * @param {number} target * @return {number[]} */ var twoSum = ...

  5. 移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签)

    移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签) 一.总结 一句话总结: 添加viewport标签:meta name="viewport" ...

  6. sqlserver 下三种批量插入数据的方法

    本文将介绍三种批量插入数据的方法,需要的朋友可以参考下 本文将介绍三种批量插入数据的方法.第一种方法是使用循环语句逐个将数据项插入到数据库中:第二种方法使用的是SqlBulkCopy,使您可以用其他源 ...

  7. 一维、二维数组 与 常用的返回数组 以及 fetch_all与fetch_row的区别

    一维数组:单行单列的数组. 二维数组:多行多列的数组.       (至少两行两列) 索引数组: fetch_all() 返回所有数组 fetch_row() 返回一行或一列数组  (第二行需要输入两 ...

  8. Ceisum官方教程3 -- 空间数据可视化

    原文地址:https://cesiumjs.org/tutorials/Visualizing-Spatial-Data/ 这篇教程教你如何使用Cesium的Entity API去绘制空间数据,如点, ...

  9. 如何收缩Mysql的ibdata1文件

    ibdata1是MySQL数据库中一个数据文件了,你会发现它来越大了,下面我来介绍收缩Mysql的ibdata1文件大小方法. 如果你有使用InnoDB来存储你的Mysql表,使用默认设置应该会碰到个 ...

  10. Django部署,Django+uWSGI+nginx+Centos部署

    说明:系统是在windows上开发的,使用django1.11.4+python3.6.3开发,需要部署在centos6.4服务器上. 第一步:在Centos6.4上安装Python3.6.2 安装请 ...