前言

很多时候用$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. CodeForces - 581B-Luxurious Houses

    The capital of Berland has n multifloor buildings. The architect who built up the capital was very c ...

  2. dot watch

    dot watch+vs code提升asp.net core开发效率 在园子中,已经又前辈介绍过dotnet watch的用法,但是是基于asp.net core 1.0的较老版本来讲解的,在asp ...

  3. python 遇到的一些问题和解决方法

    安装crypto  python3里面这个改成了pycryptodome 1. pip3 install pycryptodome 或者 pip3 install -i https://pypi.do ...

  4. SPI接口的ETH芯片(ENC28J60/W5500)

    一 ENC28J60:SPI接口.中断.复位.LED指示.可参看野火相应教程.简单的在单片机中实现网页服务器是参考AVRNET项目,复杂的是用LWIP协议栈.telnet用于用PC的TELNET可以远 ...

  5. Spark Mllib里如何建立密集向量和稀疏向量(图文详解)

    不多说,直接上干货! 具体,见 Spark Mllib机器学习实战的第4章 Mllib基本数据类型和Mllib数理统计

  6. Eclipse启动SDK Manager报错:[SDK Manager] 'xcopy' 不是内部或外部命令,也不是可运行的程序。

    解决方法,在path环境变量下加上C:\WINDOWS\system32;或将C:\WINDOWS\system32\xcopy.exe拷贝到android sdk目录的tools下面即可正常运行.

  7. android模拟器创建时的PANIC: Could not open:错误的解决

    创建AVD之后,在启动时报如下错误,解决方法如下: 在环境变量中创建ANDROID_SDK_HOME=D:\Program Files (x86)\Android\android-sdk,后面的当然是 ...

  8. 【踩坑】springMVC 接收String参数没有判断为空

    今天在调试iReview项目的接口时,发现新增词条和新增库的时候,某些字段即使留空POST到后台时也能当做不为空. 经过排查,发现后台是使用 String 变量名 == null 这样的语句去判断变量 ...

  9. ios获取数据之encodeURI 和 decodeURI

    在APP开发过程中,免不了要进行ios的数据处理,在ios传递数据的过程中,会出现JSON数据获取不到的情况,这时候就轮到encodeURI 和 decodeURI出马了. 1.encodeURI,d ...

  10. Webpack 10分钟入门

    可以说现在但凡开发Single page application,webpack是一个不可或缺的工具. WebPack可以看做是一个模块加工器,如上图所示.它做的事情是,接受一些输入,经过加工产生一些 ...