個人主頁：Guiat
歸屬專欄：Vue

正文

1. Props/Emit 父子組件通信

1.1 Props 向下傳遞數據

Props 是 Vue 中最基本的組件通信方式，用于父組件向子組件傳遞數據。

// 子組件定義
export default {name: 'ChildComponent',props: {// 基礎類型檢查message: String,// 多種類型propA: [String, Number],// 必填項requiredProp: {type: String,required: true},// 帶默認值propWithDefault: {type: Number,default: 100},// 對象/數組默認值objectProp: {type: Object,default: () => ({ key: 'value' })},// 自定義驗證customProp: {validator(value) {return ['success', 'warning', 'danger'].includes(value)}}}
}

1.2 Emit 向上傳遞事件

子組件通過觸發事件向父組件傳遞信息。

// 子組件
<template><div><button @click="sendToParent">發送到父組件</button></div>
</template><script>
export default {emits: ['update', 'delete'], // 聲明組件發出的事件methods: {sendToParent() {// 觸發事件并傳遞數據this.$emit('update', { id: 1, name: '更新的數據' })}}
}
</script>

// 父組件
<template><child-component @update="handleUpdate"@delete="handleDelete"/>
</template><script>
export default {methods: {handleUpdate(data) {console.log('收到子組件數據:', data)},handleDelete(id) {console.log('刪除ID:', id)}}
}
</script>

2. EventBus 跨組件通信

2.1 創建事件總線

EventBus 允許任意組件間通信，不受組件層級限制。

// Vue 2 創建事件總線
// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()// Vue 3 創建事件總線
// eventBus.js
import mitt from 'mitt'
export const EventBus = mitt()

2.2 使用事件總線

// 組件A - 發送事件
import { EventBus } from '@/eventBus'export default {methods: {sendMessage() {// Vue 2EventBus.$emit('custom-event', { message: '這是一條消息' })// Vue 3EventBus.emit('custom-event', { message: '這是一條消息' })}}
}

// 組件B - 接收事件
import { EventBus } from '@/eventBus'export default {created() {// Vue 2EventBus.$on('custom-event', this.handleEvent)// Vue 3EventBus.on('custom-event', this.handleEvent)},beforeDestroy() { // Vue 2EventBus.$off('custom-event', this.handleEvent)},beforeUnmount() { // Vue 3EventBus.off('custom-event', this.handleEvent)},methods: {handleEvent(data) {console.log('收到事件數據:', data)}}
}

2.3 EventBus 優缺點

優點：

• 使用簡單，可實現任意組件間通信
• 不需要組件間有直接的引用關系

缺點：

• 可能導致事件混亂，難以追蹤數據流向
• 組件耦合度增加，不利于維護
• 大型應用中建議使用Vuex/Pinia等狀態管理方案

3. Provide/Inject 深層組件通信

3.1 基本使用

適用于深層嵌套組件間通信，祖先組件提供數據，后代組件注入使用。

// 祖先組件提供數據
export default {provide() {return {// 提供靜態值theme: 'dark',// 提供響應式數據user: this.user,// 提供方法updateUser: this.updateUser}},data() {return {user: { name: '張三', role: 'admin' }}},methods: {updateUser(newUser) {this.user = newUser}}
}

// 后代組件注入數據
export default {inject: ['theme', 'user', 'updateUser'],// 或者使用別名和默認值inject: {appTheme: {from: 'theme',default: 'light'},currentUser: 'user'},methods: {changeUserRole() {this.updateUser({...this.currentUser, role: 'editor'})}}
}

3.2 響應式處理

Vue 3中使用provide/inject實現響應式通信：

// 祖先組件 (Vue 3)
import { provide, ref, readonly } from 'vue'export default {setup() {const count = ref(0)function increment() {count.value++}// 提供只讀值防止子組件修改provide('count', readonly(count))provide('increment', increment)return { count, increment }}
}

// 后代組件 (Vue 3)
import { inject } from 'vue'export default {setup() {const count = inject('count')const increment = inject('increment')return { count, increment }}
}

3.3 Provide/Inject 優缺點

優點：

• 解決深層嵌套組件通信問題
• 避免了"prop drilling"（屬性透傳）
• Vue 3中與組合式API結合使用更加靈活

缺點：

• 增加了組件間的隱式依賴
• 重構時可能導致問題
• 數據來源不明確，可能影響代碼可維護性

4. 各通信方式對比與選擇

通信方式	適用場景	優點	缺點
Props/Emit	父子組件通信	簡單直接，Vue官方推薦	層級深時需要多層傳遞
EventBus	任意組件間通信	使用簡單，無需組件關系	事件難以追蹤，大型應用不推薦
Provide/Inject	深層組件通信	避免屬性透傳	增加隱式依賴
Vuex/Pinia	復雜應用狀態管理	集中管理狀態，狀態變化可追蹤	小型應用可能過于復雜
$attrs/$listeners	透傳屬性和事件	無需顯式聲明即可傳遞	僅適用于中間層組件傳遞

5. 最佳實踐建議

1. 就近原則：優先使用最簡單的通信方式解決問題
2. 明確數據流：保持單向數據流，便于追蹤和調試
3. 合理拆分組件：減少不必要的組件嵌套和通信
4. 狀態提升：將共享狀態提升到最近的共同父組件
5. 大型應用：考慮使用Vuex/Pinia進行狀態管理
6. 文檔化：為組件間的通信方式編寫清晰的文檔

通過合理選擇和組合這些通信方式，可以構建出數據流清晰、易于維護的Vue應用。

結語
感謝您的閱讀！期待您的一鍵三連！歡迎指正！