Vue 程式札記 : emit 事件發射

更新於 發佈於 閱讀時間約 4 分鐘

組件之間的通信是 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 變量中,從而在頁面上顯示來自子組件的消息。


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

❤️按個愛心|💬留言互動|🔗分享此文|📌追蹤阿梧

avatar-img
60會員
91內容數
「梧笙」即「吾生」,意即我的生命,朋友都叫我「阿梧(Awu)」,高雄人。我喜歡學習新技能,從程式設計到網路工具,再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章,如果你有任何想法或問題,歡迎來信到我的郵箱 aowulife109@gmail.com
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
梧笙の領域展開 的其他內容
在 Vue 中,組件是構建應用程式的基本單位,而 props 是組件間傳遞資料的主要方式之一,本文將介紹 Vue 中的 props,並通過實際範例展示如何使用 props 實現組件間的資料傳遞。
v-bind 指令是最常用的指令之一,它用於將資料綁定到 HTML 屬性。本文將介v-bindnd指令的使用方法,並透過實際範例幫助你理解v-bindbind 指令。
v-model 指令是 Vue 中一個非常重要的功能,它實現了表單輸入和應用狀態之間的雙向綁定。本文將介紹如何使用 v-model 指令。
在Vue中,v-for指令是用於渲染列表數據。本文將介紹v-for指令的用法,並提供簡單的範例來幫助你理解如何在你的 Vue 應用中有效地使用v-for指令。
在 Vue 3 的 Composition API 中,引入了兩個重要的響應式數據處理工具:ref 和 reactive,本文將介紹ref 和 reactive,並透過實際範例來解釋它們的用法和差異。
在 Vue 中,watch是用於進行數據監聽的,可以用來響應式的監聽資料的變化並執行相應的操作。本文介紹watch功能,並透過實際範例讓你更好的理解。
在 Vue 中,組件是構建應用程式的基本單位,而 props 是組件間傳遞資料的主要方式之一,本文將介紹 Vue 中的 props,並通過實際範例展示如何使用 props 實現組件間的資料傳遞。
v-bind 指令是最常用的指令之一,它用於將資料綁定到 HTML 屬性。本文將介v-bindnd指令的使用方法,並透過實際範例幫助你理解v-bindbind 指令。
v-model 指令是 Vue 中一個非常重要的功能,它實現了表單輸入和應用狀態之間的雙向綁定。本文將介紹如何使用 v-model 指令。
在Vue中,v-for指令是用於渲染列表數據。本文將介紹v-for指令的用法,並提供簡單的範例來幫助你理解如何在你的 Vue 應用中有效地使用v-for指令。
在 Vue 3 的 Composition API 中,引入了兩個重要的響應式數據處理工具:ref 和 reactive,本文將介紹ref 和 reactive,並透過實際範例來解釋它們的用法和差異。
在 Vue 中,watch是用於進行數據監聽的,可以用來響應式的監聽資料的變化並執行相應的操作。本文介紹watch功能,並透過實際範例讓你更好的理解。
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
VUE為單向資料流的框架,在鄰近層級之間我們可以依靠 props 由父層向子層來傳遞需要的資料,然而遇到跨層級的架構時,雖然也是可以一層層傳進去,只是這會造成多餘的處理及凌亂的程式碼,因此才有了 "provide" 來解決我們跨層級的需求。 層級展示圖
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
2023 Vue直播班筆記 - 動態路由Props,接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
一般而言,組件之間的資料傳遞,可以使用 props 來達成,不過一旦層級過多的時候,props 就要逐層向下傳遞,會越來越麻煩且複雜。 而 provide、inject 可以解決這個問題,它可以提供一個「源頭」,子組件們可以藉由同一個源頭取得對應的資料,且沒有層級分別,都可以取得,就不用逐層傳遞資
當 父組件 有數據想傳送到 子組件 就可以使用props 1​. 父層傳遞設置 可以在父組件的屬性給予一個值,當作要傳送到子組件的資料。 父層組件​ : <!-- App.vue (父組件) --> <template> <div> <ChildComponent greetin
Thumbnail
這系列是我在 2023 六角學院 Vue作品實戰班的筆記,筆記以本人理解的方式記錄。此篇主題為 Slot Props 進階應用 ,其中包含單筆資料、多筆資料。
※ 說明事件委派 (Event Delegation) ,背後的運作機制。 網頁元素接收事件的順序,流程有兩種個方向的傳遞: 由下而上的,稱為事件冒泡 (event bubbling) 由上而下的,稱為事件捕獲 (event capturing) ※ 事件冒泡 Event Bubbling
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
VUE為單向資料流的框架,在鄰近層級之間我們可以依靠 props 由父層向子層來傳遞需要的資料,然而遇到跨層級的架構時,雖然也是可以一層層傳進去,只是這會造成多餘的處理及凌亂的程式碼,因此才有了 "provide" 來解決我們跨層級的需求。 層級展示圖
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
Thumbnail
Vue.js是一種基於MVVM的前端JavaScript框架,類似的框架有React、Angular等。 架設環境 安裝Visual Studio Code(https://code.visualstudio.com/) 安裝Node.js(https://nodejs.org/en/
Thumbnail
2023 Vue直播班筆記 - 動態路由Props,接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
一般而言,組件之間的資料傳遞,可以使用 props 來達成,不過一旦層級過多的時候,props 就要逐層向下傳遞,會越來越麻煩且複雜。 而 provide、inject 可以解決這個問題,它可以提供一個「源頭」,子組件們可以藉由同一個源頭取得對應的資料,且沒有層級分別,都可以取得,就不用逐層傳遞資
當 父組件 有數據想傳送到 子組件 就可以使用props 1​. 父層傳遞設置 可以在父組件的屬性給予一個值,當作要傳送到子組件的資料。 父層組件​ : <!-- App.vue (父組件) --> <template> <div> <ChildComponent greetin
Thumbnail
這系列是我在 2023 六角學院 Vue作品實戰班的筆記,筆記以本人理解的方式記錄。此篇主題為 Slot Props 進階應用 ,其中包含單筆資料、多筆資料。
※ 說明事件委派 (Event Delegation) ,背後的運作機制。 網頁元素接收事件的順序,流程有兩種個方向的傳遞: 由下而上的,稱為事件冒泡 (event bubbling) 由上而下的,稱為事件捕獲 (event capturing) ※ 事件冒泡 Event Bubbling