Vue 程式札記 : emit 事件發射

組件之間的通信是 Vue 應用開發中的一個重要方面。Vue 提供了一種名為事件發射（emit）的機制，讓子組件能夠向父組件發送消息。本文將介紹 Vue 中的事件發射（emit）機制，並通過實際範例演示其用法。

事件發射（emit）的基本概念

在 Vue 中，組件間的通信通常有兩種方式：通過 props 傳遞數據和通過 emit 進行消息傳遞。emit 是一種子組件向父組件發送消息的機制，這種機制允許子組件觸發一個事件，並將數據作為參數傳遞給父組件。父組件可以監聽這個事件，並根據接收到的數據執行相應的操作。

使用事件發射（emit）的場景

emit 通常用於以下幾種場景：

1. 子組件狀態變化：當子組件的狀態發生變化時，它可以通過發射事件來通知父組件，使父組件能夠響應這些變化。
2. 用戶互動：在子組件中，用戶的互動行為（如點擊按鈕）可以觸發事件的發射，從而通知父組件進行相應的處理。
3. 表單輸入：在表單組件中，輸入字段的變化可以通過事件發射來通知父組件，以便於集中管理表單數據。

事件發射（emit）的實際範例

下面是一個簡單的範例，用來說明如何在子組件中發射一個事件，並在父組件中監聽這個事件。

子組件（ChildComponent.vue）

<script setup>
import { defineEmits } from 'vue';

// 定義可以發射的事件
const emits = defineEmits(['updateMessage']);

// 事件發射的函數
const sendMessage = () => {
  emits('updateMessage', 'Hello from ChildComponent!');
};
</script>

<template>
  <button @click="sendMessage">Send Message</button>
</template>

在這個子組件中，我們使用 defineEmits 函數來定義一個可以發射的事件列表。在這個例子中，我們定義了一個名為 updateMessage 的事件。當用戶點擊按鈕時，sendMessage 函數會被調用，該函數通過 emits 函數發射 updateMessage 事件，並將一條消息作為參數傳遞。

父組件（ ParentComponent.vue）

<template>
  <ChildComponent @updateMessage="handleMessage" />
  <p>Received message: {{ message }}</p>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
import { ref } from 'vue';

// 接收消息的變量
const message = ref('');

// 處理接收到的消息
const handleMessage = (msg) => {
  message.value = msg;
};
</script>

在父組件中，我們使用 v-on 指令（簡寫為 @）來監聽子組件發射的 updateMessage 事件。當事件被發射時，handleMessage 函數將被調用，並將接收到的消息更新到 message 變量中，從而在頁面上顯示來自子組件的消息。

😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊

❤️按個愛心｜💬留言互動｜🔗分享此文｜📌追蹤阿梧｜☕請喝咖啡