在 Vue 中，自定义事件是父组件和子组件之间通信的重要方式。父组件可以监听子组件的事件，子组件则通过触发自定义事件将数据传递给父组件。如果子组件需要向父组件传递多个参数。
$emit 方法使用
一、场景介绍
假设我们有一个父组件和一个子组件。子组件需要通过自定义事件向父组件传递多个参数，比如 name 和 age。父组件需要监听子组件的事件并接收这两个参数。
二、实现步骤
- 在子组件中触发自定义事件并传递多个参数：
在子组件中，可以使用 $emit 方法触发自定义事件并传递多个参数。$emit 的第一个参数是事件名称，后续的参数就是需要传递的数据。
<!-- 子组件 Child.vue -->
<template>
<button @click="sendData">发送数据</button>
</template>
<script>
export default {
methods: {
sendData() {
// 触发自定义事件，并传递多个参数
this.$emit('send-info', 'Alice', 25);
}
}
};
</script>
在上面的代码中，子组件通过 this.$emit('send-info', 'Alice', 25) 触发了 send-info 事件，并传递了两个参数：'Alice' 和 25。
- 在父组件中监听自定义事件并接收多个参数：
父组件可以通过在子组件上监听自定义事件来接收这些参数。事件监听可以直接在模板中进行，并通过回调函数接收传递的参数。
<!-- 父组件 Parent.vue -->
<template>
<div>
<Child @send-info="handleInfo" />
</div>
</template>
<script>
import Child from './Child.vue';
export default {
components: {
Child
},
methods: {
handleInfo(name, age) {
console.log('接收到的名字:', name);
console.log('接收到的年龄:', age);
}
}
};
</script>
在父组件中，通过在子组件上添加 @send-info="handleInfo"，监听了子组件的 send-info 事件。当事件被触发时，handleInfo 方法会被调用，并且接收到子组件传递的两个参数。
在 Vue 中父组件接收子组件传递的多个参数非常简单。只需在子组件中使用 $emit 方法传递多个参数，在父组件中通过事件监听函数接收这些参数即可。
这种方式不仅适用于两个参数的传递，实际上可以传递任意数量的参数。只需在 $emit 方法中依次添加参数，并在父组件的回调函数中按顺序接收即可。