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和Firebase实现后台数据存储的示例代码
在现代 web 应用开发中,前端和后端的无缝协作至关重要,借助 Firebase 等云计算解决方案,前端开发者可以轻松实现数据存储与实时更新,本文将为大家详细介绍如何利用 Vue 3 的 Composition API 和 Firebase 实现后台数据存储,需要的朋友可以参考下
2024-10-10
vue组件之间通信实例总结(点赞功能)
这篇文章主要介绍了vue组件之间通信,结合实例形式分析了vue父子组件、兄弟组件之间通信的原理、实现方法,并给出了一个类似点赞功能的总结实例,需要的朋友可以参考下
2018-12-12
vue实现可增删查改的成绩单
这篇文章主要为大家详细介绍了vue实现可增删查改的成绩单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
Vuex 命名空间 namespaced的使用
本文主要介绍了Vuex 命名空间 namespaced的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-03-03
el-select单选时选择后输入框的is-focus状态并没有取消问题解决
这篇文章主要给大家介绍了关于el-select单选时选择后输入框的is-focus状态并没有取消问题的解决过程,文中通过图文以及代码示例将解决的办法介绍的非常详细,需要的朋友可以参考下
2024-01-01
Vue.js实战之使用Vuex + axios发送请求详解
这篇文章主要给大家介绍了关于Vue.js使用Vuex与axios发送请求的相关资料，文中介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-04-04
Vue使用v-model收集各种表单数据、过滤器的示例详解
这篇文章主要介绍了Vue使用v-model收集各种表单数据、过滤器的示例,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-08-08
基于vue.js实现分页查询功能
这篇文章主要为大家详细介绍了基于vue.js实现分页查询功能，vue.js实现数据库分页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
Vue中引入echarts的步骤及折线图、柱状图常见配置项
这篇文章主要介绍了Vue中引入echarts的步骤及折线图、柱状图常见配置项,需要的朋友可以参考下
2023-11-11
Element Plus修改表格行和单元格样式详解
在使用Element Plus中的table组件展示数据时,由于需要对表格行内数据的数据进行修改,下面这篇文章主要给大家介绍了关于Element Plus修改表格行和单元格样式的相关资料,需要的朋友可以参考下
2022-04-04