在 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 方法中依次添加參數，并在父組件的回調函數中按順序接收即可。