在 Vue 自定义事件中，父组件如何接收子组件传递的多个参数?

在 Vue 中，自定义事件是父组件和子组件之间通信的重要方式。父组件可以监听子组件的事件，子组件则通过触发自定义事件将数据传递给父组件。如果子组件需要向父组件传递多个参数。

 $emit 方法使用

一、场景介绍

假设我们有一个父组件和一个子组件。子组件需要通过自定义事件向父组件传递多个参数，比如 name 和 age。父组件需要监听子组件的事件并接收这两个参数。

二、实现步骤

1. 在子组件中触发自定义事件并传递多个参数：

在子组件中，可以使用 $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。

2. 在父组件中监听自定义事件并接收多个参数：

父组件可以通过在子组件上监听自定义事件来接收这些参数。事件监听可以直接在模板中进行，并通过回调函数接收传递的参数。

 

<!-- 父组件 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 方法中依次添加参数，并在父组件的回调函数中按顺序接收即可。