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传递多参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

使用elementUI实现将图片上传到本地的示例
今天小编就为大家分享一篇使用elementUI实现将图片上传到本地的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue.js模版插值的原理与实现方法简析
这篇文章主要介绍了vue.js模版插值的原理与实现方法,结合实例形式简单分析了vue.js模板插值的基本功能、原理、实现方法与注意事项,需要的朋友可以参考下
2023-04-04
Vue中Axios的封装与接口管理详解
在vue项目中和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中,下面这篇文章主要给大家介绍了关于Vue中Axios的封装与接口管理的相关资料,需要的朋友可以参考下
2022-03-03
Vue公共loading升级版解决思路(处理并发异步差时响应)
这篇文章主要介绍了Vue公共loading升级版（处理并发异步差时响应）,解决思路是通过定义一个全局对象来存储每个接口的响应状态，直到每个请求接口都收到响应才变更状态，结束loading动画，需要的朋友可以参考下
2023-11-11
基于vue-router的matched实现面包屑功能
本文主要介绍了基于vue-router的matched实现面包屑功能，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
详解解决使用axios发送json后台接收不到的问题
这篇文章主要介绍了详解解决使用axios发送json后台接收不到的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
关于eslint和prettier格式化冲突问题
这篇文章主要介绍了eslint和prettier格式化冲突问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-08-08
深度解读vue-resize的具体用法
这篇文章主要介绍了vue-resize深度解读，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
详解vuex状态管理模式
这篇文章主要介绍了详解vuex状态管理模式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
vue 项目软键盘回车触发搜索事件
这篇文章主要介绍了vue 项目软键盘回车触发搜索事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09