前言

很多时候用$emit携带参数传出事件,并且又需要在父组件中使用自定义参数时,这时我们就无法接受到子组件传出的参数了。
找到了两种方法可以同时添加自定义参数的方法。

方法一

子组件传出单个参数时:


// 子组件
this.$emit('test',this.param)
// 父组件
@test='test($event,userDefined)'

方法二

子组件传出多个参数时:


// 子组件
this.$emit('test',this.param1,this.param2, this.param3)
// 父组件 arguments 是以数组的形式传入
@test='test(arguments,userDefined)'

参考文献

https://github.com/vuejs/vue/...

原文地址:https://segmentfault.com/a/1190000016726750

vue $emit子组件传出多个参数,如何在父组件中在接收所有参数的同时添加自定义参数的更多相关文章

  1. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  2. Vue 父组件向子组件传值,传方法,传父组件整体

    父子组件传值 1.父组件调用子组件时绑定属性,例如-> :title="title" 2.子组件中在props中声明title:props:['title','msg'] 3 ...

  3. SpringMVC中控制器接收JSP页面表单的参数接收方式详解及细节注意(400错误)

    控制器方法中参数的接收 (1)以前的参数接收: String  param = req.getParameter(name): (2)SpringMVC简化这个操作,只需要给控制器方法添加参数即可 a ...

  4. SpringMVC中@RequestBody接收前端传来的多个参数

    在使用ajax发送请求时,如果发送的JSON数据是一个类中的不同属性,在Controller方法中使用@RequestBody会直接封装进该类中 例如: 前端部分代码 JavaScript <s ...

  5. $emit子组件传出多个参数,如何在父组件中在接收所有参数的同时添加自定义参数

    很多时候用$emit携带参数传出事件,并且又需要在父组件中使用自定义参数时,这时我们就无法接受到子组件传出的参数了.    找到了两种方法可以同时添加自定义参数的方法. 方法一:子组件传出单个参数时 ...

  6. vue子组件向父组件传递参数的基本方式

    子组件: this.$emit('transferUrl', this.picUrl) 父组件: 引入子组件<pics @transferUrl="gettransferUrl&quo ...

  7. 子组件通过 $emit 触发父组件的自定义事件

    子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData} ...

  8. vue.js事件传值之子组件传向父组件以及$emit的使用

    在项目开发中,有时候会遇到一种需求比如是:在子组件中,通过一个事件,比如点击事件,去改变父组件中的某个值,下面来看看是怎么个流程 还是先截图目录结构 父组件为app.vue,components中的文 ...

  9. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

随机推荐

  1. Linux操作学习笔记1

    Linux只有一个根目录/,所有的文件和设备都当成是文件进行管理: pwd 打印当前工作目录 (print working directory) whoami ls  列出当前目录面的文件 ls -l ...

  2. NET Core 事件总线

    NET Core 事件总线,分布式事务解决方案:CAP 背景 相信前面几篇关于微服务的文章也介绍了那么多了,在构建微服务的过程中确实需要这么一个东西,即便不是在构建微服务,那么在构建分布式应用的过程中 ...

  3. 064 Minimum Path Sum 最小路径和

    给定一个只含非负整数的 m x n 网格,找到一条从左上角到右下角的可以使数字之和最小的路径.注意: 每次只能向下或者向右移动一步.示例 1:[[1,3,1], [1,5,1], [4,2,1]]根据 ...

  4. Spark Mllib里如何程序输出数据集的条数(图文详解)

    不多说,直接上干货! 具体,见 Hadoop+Spark大数据巨量分析与机器学习整合开发实战的第17章 决策树多元分类UCI Covertype数据集

  5. 图解css3のborder-radius

    早期制作圆角都是使用图片来实现.通过用1px 的水平线条来堆叠出圆角或者利用JavaScript等等方法,但是都是需要增加多个无意义的标签来实现,造成代码亢余.如今有了CSS3的圆角属性——borde ...

  6. 安卓下对SD卡文件的读写

    为SD下的操作文件,封装了一些类: package ujs.javawritedata; import java.io.File; import java.io.FileInputStream; im ...

  7. File类。

    File类: java.io.File 类.是文件和文件夹目录名的抽象表示形式. 可以用File对文件和文件夹进行 创建,删除,获取等操作. File类的一些静态成员变量: static String ...

  8. new() 与new

    一般写的时候,new对象都要加()

  9. GitHub 开启 Two-factor authentication,如何在命令行下更新和上传代码

    最近在使用GitHub管理代码,在git命令行管理代码时候遇到一些问题. 如果开起了二次验证(Two-factor authentication两个要素认证),命令行会一直提示输入用户名和密码.查找了 ...

  10. sql问题:备份集中的数据库备份与现有的 '办公系统' 数据库不同

    解决方法:把备份的数据库从原有的地方先分离,再拷贝一份,在需要还原的服务器上附加到数据库中,在根数据库上点击“还原数据库”,选择需要还原的数据库名称,以及还原的bak备份文件,在选择“选项”,勾选上“ ...