2025 年最新 Vue.js 父子組件間的通信教學

Vue.js 是一個輕量級的 JavaScript 框架，可以讓開發者快速開發出優秀的 Web 應用程式。隨著版本的更新，Vue.js 提供了更強大的功能來建立父子組件之間的通信，讓開發者能更簡單地管理組件之間的關係。

透過 Props 進行通信

在 Vue.js 中，父子組件之間的通信主要可以透過 props 來完成。props 是一個特殊的物件，允許父組件向子組件傳遞資料。

以下是使用 props 的範例：

// Parent.vue
  

// Child.vue
  

在上述範例中，Parent 組件定義了一個 message 的 prop，並將其傳遞給 Child 組件，Child 則可以使用 message 顯示資料。

使用自定義事件進行通信

除了 props，Vue.js 還提供了另一種方法來完成父子組件間的通信，那就是透過 自定義事件。這種方式允許子組件向父組件傳遞資料。

以下是使用自定義事件的範例：

// Parent.vue
  

// Child.vue
  

在這個範例中，Parent 組件定義了一個 handleMessage 方法，然後在 Child 組件中使用 $emit 方法來向父組件傳遞資料。

總結

總結來說，Vue.js 提供了簡單而有效的方法來建立父子組件之間的通信。透過 props 和自定義事件，開發者能夠更輕鬆地管理組件之間的關係，提升開發效率。

Q&A 區塊

1. Vue.js 中的 props 是什麼？

Props 是一種用於父子組件間傳遞資料的機制，父組件可以通過 props 將資料傳遞給子組件。

2. 如何在 Vue.js 中使用自定義事件？

自定義事件可以讓子組件通過 $emit 方法向父組件傳遞資料，父組件則可以使用事件綁定來處理這些事件。

3. Vue.js 中的組件通信有什麼最佳實踐？

使用 props 傳遞資料時，應該保持資料的單向流動，避免過於複雜的組件關係，並且盡量使用自定義事件來進行交互。

—