$emit参数读取方式 $event、arguments

原创于 2021-09-29 14:28:51 发布 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html5 #html

js 同时被 2 个专栏收录

10 篇文章

订阅专栏

vue

7 篇文章

订阅专栏

本文介绍了在Vue中，如何使用$event进行单个参数的父子组件通信，并展示了如何通过对象传递多个参数。同时，也讲解了arguments在处理多个参数场景的应用，以及如何结合index传递数据，更新列表中的特定项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1: $event 常用于单个参数emit, 且父组件中的响应函数需要用到本身的指定的数据（如列表中的index）
其实子组件也可以通过对象存储多个传参，然后用单个对象传递
代码如下：

// 子组件中：
onChange(value){
	this.$emit('onChangeFn', value)
}

// 父组件中：
<childenComponents 
	@onChangeFn="FnName($event, index)">
</childenComponents>
FnName(childData, index){
	this.list[index].value = childData;
}

2： arguments 用于子组件中有多个参数返回，且父组件中的响应函数需要用到本身的指定的数据（如列表中的index）

// 子组件中：
value1= '';
value2= '';
onChange(){
	// 可以有任意个参数，这里举例用了两个
	this.$emit('onChangeFn', this.value1, this.value2)
}

// 父组件中：
<childenComponents 
	@onChangeFn="FnName(arguments, index)">
</childenComponents>
FnName([value1, value2], index){
	this.list[index].value1 = value1 ;
	this.list[index].value1 = value2;
}