关于父组件通过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:子组件在自身标签上,使用自定义的属性来接收外界 ...
随机推荐
- kafka offset manage
kafka low api:fetch数据从topic partition offset buffsize长度. 提交一般两个维度:时间维度,满多少条提交(0.8X之前是没这参数) 在0.8.2.2版 ...
- Windows API 第14篇 DeleteAndRenameFile
函数定义:BOOL DeleteAndRenameFile( LPCWSTR lpszDestFile, ...
- UDP和TCP的区别?
区别总结: 1.TCP面向连接,UDP的面向无连接的,即发送数据之前不需要建立简介. 2.TCP提供可靠的数据传输,有发送应答机制,超时重传机制,错误校验机制,流量控制机制保证传输的安全,不丢失,不重 ...
- express 4.x 搭建Node项目框架
npm install -g express-generator express projectName cd projectName npm install 手动添加文件夹config.models ...
- mysql基础教程(一)-----概述、安装、查询
概述 好处 •实现数据持久化 •使用完整的管理系统统一管理,易于查询 概念 DB 数据库(database):存储数据的“仓库”.它保存了一系列有组织的数据. DBMS 数据库管理系统(Databas ...
- 一个班六个人,学号语文、数学、英语,接收成绩(不接受学号),输出学号成绩,总分、平均分,按总分排序(原生JS)
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- IO流18 --- RandomAccessFile实现数据的读写操作 --- 技术搬运工(尚硅谷)
RandomAccessFile实例化时,需要设置读写模式 示例:复制文件 @Test public void test16() throws IOException { RandomAccessFi ...
- Django-rest Framework(四)
序列化模块时rest-framework的很重要的组成部分 rest-framework序列化模块(核心) 一. 为什么要使用序列化组件? 后台的数据多以后台的对象存在,经过序列化后,就可以格式化 ...
- oracle pl/sql远程连接过程
之前没用过oracle,现在公司用到就记录下安装过程吧.安装PL/SQL工具,安装oracle11G工具.打开PL/SQL 进行配置.
- Redis源码解析:15Resis主从复制之从节点流程
Redis的主从复制功能,可以实现Redis实例的高可用,避免单个Redis 服务器的单点故障,并且可以实现负载均衡. 一:主从复制过程 Redis的复制功能分为同步(sync)和命令传播(comma ...