前言

很多时候用$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. Python-9-赋值进阶

    1.序列解包 同时给多个变量赋值  >>> x, y, z = 1, 2, 3 >>> print(x, y, z) 1 2 3 用这种方式还可以交换两个变量的值 ...

  2. Codeforces 185B(数学结论)

    要点 有不等式\(x^ay^bz^c=a^ab^bc^c(\frac{x}{a})^a(\frac{y}{b})^b(\frac{z}{c})^c<=a^ab^bc^c(\frac{x+y+z} ...

  3. leecode-39. Combination Sum

    1.问题描述: Given a set of candidate numbers (C) (without duplicates) and a target number (T), find all ...

  4. 从一个LocalDateTime引发的疑问

    一 公司有同事部署出错,然后查日志,找时间,从k8s得到的时间是  2017-06-16T09:38:48.580 +0000,然后他就纳闷了,因为他根本不会在9点部署好吧,而且9点大多数程序员都没开 ...

  5. HashMap与TreeMap

    package com.jckb; import java.util.Map; import java.util.Set; import java.util.TreeMap; /**TreeMap * ...

  6. ES5数组遍历

    reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值. array.reduce(function(total, currentValue, curren ...

  7. 关于下载文件封装的两个类(Mars)

    首先是文件FileUtils.java package mars.utils; import java.io.File; import java.io.FileOutputStream; import ...

  8. I/O操作总结(一)

    所谓IO,也就是Input与Output的缩写.在java中,IO涉及的范围比较大,这里主要讨论针对文件内容的读写 其他知识点将放置后续章节(我想,文章太长了,谁都没耐心翻到最后) 对于文件内容的操作 ...

  9. webAPP制作框架Ionic--构建APP侧边栏 底部选项卡 轮播图 加载动画

    超好用的移动框架--Ionic Ionic是一个轻量的手机UI库,具有速度快,界面现代化.美观等特点. 为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版 ...

  10. 移动端rem单位和px单位换算

    rem单位是根据html元素的单位在页面根据不同的手机屏幕分辨率动态整体的按比例缩小或放大字体. 假如html{font-size: 14px;},那么1rem=14px; 一个div宽度48px,那 ...