Vue 組件通信

背景介紹

組件通信是 Vue 應(yīng)用開發(fā)中的重要概念，不同的組件之間需要共享數(shù)據(jù)、傳遞事件。Vue 提供了多種組件通信的方式，每種方式都有其適用場景。

組件通信方式

1. Props 和 Emit

// 父組件
<template><child-component:message="parentMessage"@update="handleUpdate"/>
</template><script>
export default {data() {return {parentMessage: 'Hello'}},methods: {handleUpdate(newValue) {this.parentMessage = newValue}}
}
</script>// 子組件
<template><div><p>{{ message }}</p><button @click="sendToParent">發(fā)送到父組件</button></div>
</template><script>
export default {props: {message: String},methods: {sendToParent() {this.$emit('update', 'New Message')}}
}
</script>

2. Provide/Inject

// 父組件
<script>
export default {provide() {return {theme: 'dark',toggleTheme: this.toggleTheme}},methods: {toggleTheme() {this.theme = this.theme === 'dark' ? 'light' : 'dark'}}
}
</script>// 子組件
<script>
export default {inject: ['theme', 'toggleTheme']
}
</script>

3. Vuex/Pinia 狀態(tài)管理

// store/index.js
import { createStore } from 'vuex'export default createStore({state: {count: 0},mutations: {increment(state) {state.count++}},actions: {increment({ commit }) {commit('increment')}}
})// 組件中使用
<script>
export default {computed: {count() {return this.$store.state.count}},methods: {increment() {this.$store.dispatch('increment')}}
}
</script>

4. EventBus（不推薦）

// eventBus.js
import mitt from 'mitt'
export default mitt()// 組件A
import eventBus from './eventBus'export default {methods: {sendMessage() {eventBus.emit('message', 'Hello')}}
}// 組件B
import eventBus from './eventBus'export default {mounted() {eventBus.on('message', (msg) => {console.log(msg)})},beforeUnmount() {eventBus.off('message')}
}

組件通信最佳實(shí)踐

1. 父子組件通信

// 推薦使用 props/emit
// 父組件
<template><child-componentv-model="value":config="config"@update="handleUpdate"/>
</template>// 子組件
<script>
export default {props: {modelValue: String,config: Object},emits: ['update:modelValue', 'update'],methods: {updateValue(newValue) {this.$emit('update:modelValue', newValue)}}
}
</script>

2. 跨組件通信

// 推薦使用 Pinia
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {state: () => ({userInfo: null,}),actions: {async fetchUserInfo() {const data = await api.getUserInfo()this.userInfo = data},},
})

常見問題

1. Props 單向數(shù)據(jù)流

// 錯誤示例
export default {props: {message: String},methods: {updateMessage() {this.message = 'New Message' // 錯誤：直接修改 props}}
}// 正確示例
export default {props: {message: String},methods: {updateMessage() {this.$emit('update:message', 'New Message')}}
}

2. 組件解耦

// 使用組合式函數(shù)
function useCounter() {const count = ref(0)const increment = () => count.value++const decrement = () => count.value--return {count,increment,decrement,}
}

面試題

1. Vue 組件間有哪些通信方式？

// 答案要點(diǎn)：
// 1. props/emit：父子組件通信
// 2. provide/inject：跨層級通信
// 3. Vuex/Pinia：狀態(tài)管理
// 4. EventBus：事件總線（不推薦）
// 5. $parent/$children：直接訪問
// 6. $refs：組件引用

2. 為什么 Vue 不推薦使用 EventBus？

// 答案要點(diǎn)：
// 1. 難以追蹤數(shù)據(jù)流向
// 2. 可能導(dǎo)致內(nèi)存泄漏
// 3. 不利于代碼維護(hù)
// 4. 難以調(diào)試

3. Vue3 中如何實(shí)現(xiàn)組件通信？

// 答案要點(diǎn)：
// 1. 使用 defineProps 和 defineEmits
// 2. 使用 provide/inject
// 3. 使用 Pinia 進(jìn)行狀態(tài)管理
// 4. 使用組合式函數(shù)實(shí)現(xiàn)邏輯復(fù)用