概述

在 Vue 3 中，組件間通信是一個常見且重要的需求。Vue 3 提供了多種方式來實現組件間的通信，根據組件的關系（父子組件、兄弟組件、跨層級組件等）和具體需求，可以選擇不同的通信方式。以下是一些常用的組件間通信方法：

1. 父子組件通信

父組件向子組件傳遞數據（Props）

• 使用 props：父組件通過 props 向子組件傳遞數據。

• 示例：

  <!-- ParentComponent.vue -->
  <template><ChildComponent :message="parentMessage" />
  </template><script>
  import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },data() {return {parentMessage: 'Hello from Parent',};},
  };
  </script>
  

  <!-- ChildComponent.vue -->
  <template><div>{{ message }}</div>
  </template><script>
  export default {props: {message: {type: String,required: true,},},
  };
  </script>
  

子組件向父組件發送事件（自定義事件）

• 使用 $emit：子組件通過 $emit 觸發事件，父組件監聽該事件并處理。

• 示例：

  <!-- ParentComponent.vue -->
  <template><ChildComponent @update="handleUpdate" />
  </template><script>
  import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },methods: {handleUpdate(newMessage) {console.log('Received from child:', newMessage);},},
  };
  </script>
  

  <!-- ChildComponent.vue -->
  <template><button @click="sendMessage">Send Message</button>
  </template><script>
  export default {methods: {sendMessage() {this.$emit('update', 'Hello from Child');},},
  };
  </script>
  

2. 兄弟組件通信

兄弟組件之間沒有直接的通信機制，通常通過共同的父組件或狀態管理工具實現。

通過父組件中轉

• 父組件作為中介：兄弟組件通過父組件傳遞數據或事件。

• 示例：

  <!-- ParentComponent.vue -->
  <template><SiblingOne @send-to-sibling="handleSiblingOneMessage" /><SiblingTwo :message="siblingTwoMessage" />
  </template><script>
  import SiblingOne from './SiblingOne.vue';
  import SiblingTwo from './SiblingTwo.vue';export default {components: { SiblingOne, SiblingTwo },data() {return {siblingTwoMessage: '',};},methods: {handleSiblingOneMessage(message) {this.siblingTwoMessage = message;},},
  };
  </script>
  

  <!-- SiblingOne.vue -->
  <template><button @click="sendMessage">Send to Sibling Two</button>
  </template><script>
  export default {methods: {sendMessage() {this.$emit('send-to-sibling', 'Hello from Sibling One');},},
  };
  </script>
  

  <!-- SiblingTwo.vue -->
  <template><div>{{ message }}</div>
  </template><script>
  export default {props: {message: {type: String,default: '',},},
  };
  </script>
  

使用全局狀態管理（如 Pinia 或 Vuex）

• Pinia：Vue 3 推薦的狀態管理庫，用于管理全局狀態。

• 示例：

  # 安裝 Pinia
  npm install pinia
  

  // store.js
  import { defineStore } from 'pinia';export const useMainStore = defineStore('main', {state: () => ({sharedMessage: '',}),actions: {setMessage(message) {this.sharedMessage = message;},},
  });
  

  <!-- SiblingOne.vue -->
  <template><button @click="sendMessage">Send to Sibling Two</button>
  </template><script>
  import { useMainStore } from './store';export default {setup() {const store = useMainStore();const sendMessage = () => {store.setMessage('Hello from Sibling One');};return { sendMessage };},
  };
  </script>
  

  <!-- SiblingTwo.vue -->
  <template><div>{{ sharedMessage }}</div>
  </template><script>
  import { computed } from 'vue';
  import { useMainStore } from './store';export default {setup() {const store = useMainStore();const sharedMessage = computed(() => store.sharedMessage);return { sharedMessage };},
  };
  </script>
  

3. 跨層級組件通信

使用 Provide/Inject

• provide 和 inject：Vue 3 提供的 API，用于在組件樹中跨層級傳遞數據。

• 示例：

  <!-- GrandParentComponent.vue -->
  <template><ParentComponent />
  </template><script>
  import { provide } from 'vue';
  import ParentComponent from './ParentComponent.vue';export default {components: { ParentComponent },setup() {provide('sharedData', 'Hello from GrandParent');},
  };
  </script>
  

  <!-- ParentComponent.vue -->
  <template><ChildComponent />
  </template><script>
  import ChildComponent from './ChildComponent.vue';export default {components: { ChildComponent },
  };
  </script>
  

  <!-- ChildComponent.vue -->
  <template><div>{{ injectedData }}</div>
  </template><script>
  import { inject } from 'vue';export default {setup() {const injectedData = inject('sharedData');return { injectedData };},
  };
  </script>
  

使用全局事件總線（不推薦）

• 事件總線：通過一個空的 Vue 實例作為事件總線，在組件間發送和接收事件。
• 缺點：不推薦在 Vue 3 中使用，因為會導致組件間耦合度增加，難以維護。

4. 使用 Vue Router 的參數

• 路由參數：通過路由參數在組件間傳遞數據。

• 示例：

  // router/index.js
  import { createRouter, createWebHistory } from 'vue-router';
  import ComponentA from './ComponentA.vue';
  import ComponentB from './ComponentB.vue';const routes = [{ path: '/component-a', component: ComponentA },{ path: '/component-b/:message', component: ComponentB },
  ];const router = createRouter({history: createWebHistory(),routes,
  });export default router;
  

  <!-- ComponentA.vue -->
  <template><button @click="navigateToB">Go to Component B</button>
  </template><script>
  import { useRouter } from 'vue-router';export default {setup() {const router = useRouter();const navigateToB = () => {router.push({ path: '/component-b/Hello from Component A' });};return { navigateToB };},
  };
  </script>
  

  <!-- ComponentB.vue -->
  <template><div>{{ $route.params.message }}</div>
  </template>
  

總結

• 父子組件：使用 props 和 $emit。
• 兄弟組件：通過父組件中轉或使用狀態管理工具。
• 跨層級組件：使用 provide/inject。
• 全局狀態：使用 Pinia 或 Vuex。
• 路由參數：通過 Vue Router 傳遞參數。

選擇合適的通信方式可以提高代碼的可維護性和可擴展性。在 Vue 3 中，推薦優先使用 props、$emit 和 provide/inject，并在需要全局狀態管理時使用 Pinia。

關聯知識

【Vue3知識】Vue3父子組件間數據通信