vue中使用$emit传递多个参数的2种方法
更新时间：2023年10月09日 10:28:16 作者：Jiang_JY
这篇文章主要给大家介绍了关于vue中如何使用$emit传递多个参数的2种方法,在Vue中可以使用$emit方法向父组件传递数据,文中通过代码介绍的非常详细,需要的朋友可以参考下
1、$emit传递一个参数
子组件：
this.$emit('getData','111')父组件：
<child @getData="getData"></child>
getData(data){
console.log(data) // '111'
}2、$emit传递多个参数
方法一：将要传的数据放到对象中，再将对象传给父组件
子组件：
let obj = {
data1: '111',
data2: '222'
}
this.$emit('getData',obj)父组件：
<child @getData="getData"></child>
getData(data){
console.log(data) // {data1:'111',data2:'222'}
}方法二：直接传递多个参数
子组件：
this.$emit('getData','111','222')父组件：
接收的时候要传 arguments 参数
<child @getData="getData(arguments)"></child>
getData(data){
console.log(data[0],data[1]) // '111' '222'
}补充知识：vue3 子组件用emit传递参数的同时，父组件也传递参数
vue父子组件可以通过emit进行传参，有些时候我们在子组件传参的同时，父组件也需要传参，比如v-for渲染的列表，可能要把索引当参数传递。那么我们怎么同时接收子组件参数和父组件参数呢？有以下两种方法。
一、子组件传出单个参数时
// 子组件
this.$emit('test',this.param)
// 父组件
@test='test($event,parentParam)'二、子组件传出多个参数时
// 子组件
this.$emit('test',this.param1，this.param2, this.param3)
// 父组件 arguments 是以数组的形式传入
@test='test(arguments,parentParam)'总结
到此这篇关于vue中使用$emit传递多个参数的2种方法的文章就介绍到这了,更多相关vue $emit传递多参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于vue中el-tree动态初始默认选中和全选实现的相关资料,eltree默认选中eltree是一种常用的树形控件,通常用于在网页上呈现树形结构的数据,例如文件夹、目录、组织结构等,需要的朋友可以参考下2023-09-09
在vue中使用express-mock搭建mock服务的方法
这篇文章主要介绍了在vue中使用express-mock搭建mock服务的方法，文中给大家提到了在vue-test-utils 中 mock 全局对象的相关知识 ,需要的朋友可以参考下2018-11-11
这篇文章主要介绍了rem使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要给大家介绍了关于vue中数据字典dicts的简单说明和用法的相关资料,如果您想在Vue中使用字典查询,您可以使用Vue的计算属性和方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
element表格翻页第2页从1开始编号(后端从0开始分页)
这篇文章主要介绍了element表格翻页第2页从1开始编号(后端从0开始分页)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了Vue.js之mixins混合组件详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
vue3.0报错Cannot find module‘worker_threads‘的解决办法
这篇文章介绍了vue3.0报错Cannot find module‘worker_threads‘的解决办法。对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-11-11![详解vue.js+UEditor集成 [前后端分离项目]](//img.jbzj.com/images/xgimg/bcimg7.png)
本篇文章主要介绍了详解vue.js+UEditor集成 [前后端分离项目] ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
今天小编就为大家分享一篇Vue 实现复制功能,不需要任何结构内容直接复制方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家介绍了vue保存自动格式化换行，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
![详解vue.js+UEditor集成 [前后端分离项目]](http://img.jbzj.com/images/xgimg/bcimg7.png)
最新评论