vue中使用$emit传递多个参数的2种方法

2023-10-09 10:24:13 作者：Jiang_JY

这篇文章主要给大家介绍了关于vue中如何使用$emit传递多个参数的2种方法,在Vue中可以使用$emit方法向父组件传递数据,文中通过代码介绍的非常详细,需要的朋友可以参考下

1、$emit传递一个参数

子组件：

this.$emit('getData','111')

父组件：

<child @getData="getData"></child>

getData(data){
	console.log(data) // '111'
}

子组件：

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'
}

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