provide 和 inject 實(shí)現(xiàn)爺孫組件通信

介紹

provide 和 inject 是 Vue.js 提供的一種在組件之間共享數(shù)據(jù)的機(jī)制，它允許在組件樹中的任何地方注入依賴項(xiàng)。這對(duì)于跨越多個(gè)層級(jí)的組件間通信特別有用，因此無(wú)需手動(dòng)將 prop 數(shù)據(jù)逐層傳遞下去。

• provide：

  • 在一個(gè)組件中使用 provide 方法來(lái)定義要提供的數(shù)據(jù)或方法。

  • provide 方法返回一個(gè)對(duì)象，該對(duì)象包含了要提供的數(shù)據(jù)或方法。

• inject：

  • 在另一個(gè)組件中使用 inject 方法來(lái)注入這些數(shù)據(jù)或方法。

  • inject 方法接收一個(gè)數(shù)組或?qū)ο?#xff0c;指明要注入的數(shù)據(jù)或方法名稱。

實(shí)現(xiàn)原理

provide 方法

當(dāng)你在組件中定義 provide 方法時(shí)，Vue.js 會(huì)執(zhí)行以下步驟：

• 創(chuàng)建 provide 對(duì)象：

provide() {return {sharedData: 'Hello from App component!',updateData: this.updateData};
}

• 附加到組件實(shí)例：Vue.js 會(huì)在組件實(shí)例上附加一個(gè) _provided 屬性，存儲(chǔ) provide 方法返回的對(duì)象。

inject 方法

當(dāng)你在組件中定義 inject 方法時(shí)，Vue.js 會(huì)執(zhí)行以下步驟：

• 查找 provide 對(duì)象：Vue.js 會(huì)從當(dāng)前組件及其祖先組件中查找 _provided 屬性。
  如果找到，則將相應(yīng)的數(shù)據(jù)或方法注入到當(dāng)前組件中。

• 注入到組件實(shí)例：注入的數(shù)據(jù)或方法會(huì)作為屬性添加到當(dāng)前組件實(shí)例上，可以通過(guò) this 訪問(wèn)。

優(yōu)點(diǎn)

• 簡(jiǎn)化多層級(jí)組件通信：不需要逐層傳遞 props，可以方便地在組件樹中的任意位置提供和注入數(shù)據(jù)。

• 靈活性高：可以動(dòng)態(tài)地提供和注入數(shù)據(jù)或方法，適用于多種場(chǎng)景。

• 減少代碼冗余：減少了逐層傳遞 props 的代碼量，提高了代碼的可讀性和可維護(hù)性。

缺點(diǎn)

• 調(diào)試?yán)щy：由于數(shù)據(jù)傳遞路徑不明確，調(diào)試時(shí)可能比較困難，尤其是在大型項(xiàng)目中。

• 組件關(guān)系模糊：組件之間的依賴關(guān)系變得不清晰，可能導(dǎo)致代碼難以理解和維護(hù)。

• 性能開銷：大量使用 provide 和 inject 可能導(dǎo)致額外的性能開銷，特別是在復(fù)雜的應(yīng)用中。

• 濫用問(wèn)題：如果過(guò)度使用 provide 和 inject，可能會(huì)導(dǎo)致組件之間的耦合度過(guò)高，降低代碼的可維護(hù)性。

vue2.x 使用

grandpa.vue 組件(爺)

• 使用 provide 方法提供了 message, message2 字符串和一個(gè) sendGradpaMessage 方法。

• sendGradpaMessage 方法用于接收子組件傳遞的消息。

// grandpa.vue<template><div class="grandpa"><h2>爺組件</h2><parent /></div>
</template><script>
import parent from './parent.vue';export default {name: 'grandpa',data() {return {}},provide() {return {message: 'This is some shared data1',message2: 'This is some shared data2',sendGradpaMessage: this.getSendMessage};},components: {parent},methods: {getSendMessage(message) {console.log('Message received:', message);}}
}
</script>

parent.vue 組件(父)

• 使用 inject 方法注入了從爺組件提供的 message 參數(shù)。

// parent.vue<template><div class="parent"><h2>父組件</h2><span>{{ message }}</span><son /></div>
</template><script>
import son from './son.vue';export default {name: 'parent',data() {return {}},inject: ['message'],components: { son },methods: {}
}
</script>

son.vue 組件(子)

• 使用 inject 方法注入了從爺組件提供的 message2 字符串和一個(gè) sendGradpaMessage 方法。

• 當(dāng)點(diǎn)擊按鈕時(shí)，調(diào)用 sendGradpaMessage 方法將消息傳遞給祖先組件。

// son.vue<template><div class="son"><h2>孫組件</h2><span>{{ message2 }}</span><el-button type="primary" @click="sendMessage">發(fā)送消息</el-button></div>
</template><script>
export default {name: 'son',data() {return {}},inject: ['message2', 'sendGradpaMessage'],methods: {sendMessage() {const msg = 'Hello from son component!';this.sendGradpaMessage(msg);}}
}
</script>

上述示例中:

• grandpa.vue 組件通過(guò) provide 方法提供了 message, message2 兩個(gè)參數(shù)和一個(gè)名為 sendGradpaMessage 的方法。

• parent.vue 組件通過(guò) inject 接收了 message 參數(shù)，并在模板中使用 message。

• son.vue 組件通過(guò) inject 接收了 message2 參數(shù)，并在模板中使用 message，同時(shí)通過(guò)點(diǎn)擊按鈕觸發(fā) sendGradpaMessage 方法將參數(shù) msg 傳給了 grandpa.vue 組件。

類型檢查

inject 的配置項(xiàng)可以是一個(gè)數(shù)組或者一個(gè)對(duì)象。當(dāng)使用對(duì)象形式時(shí)，可以指定更多的配置選項(xiàng)，比如類型檢查、默認(rèn)值等。

配置選項(xiàng)詳解

• from：指定 inject 要注入的數(shù)據(jù)的鍵名。如果沒有指定，則默認(rèn)為 inject 的鍵名。

• default：如果沒有從祖先組件中找到對(duì)應(yīng)的數(shù)據(jù)，則使用這個(gè)默認(rèn)值。這對(duì)于確保組件即使在缺少某些數(shù)據(jù)的情況下也能正常工作是非常有用的。

• from 和 default 的組合：你可以同時(shí)指定 from 和 default，在這種情況下，如果 from 指定的數(shù)據(jù)不存在，則使用 default 中定義的值。

例如，你可以指定默認(rèn)值和別名：

inject: {// 定義別名為 message2 的數(shù)據(jù)，其來(lái)源為 message2message2: {   from: 'message2',// 如果沒有提供則使用默認(rèn)值default: 'Default value if not provided'},// 定義別名為 sendGradpaMessage 的方法sendGradpaMessage: {from: 'sendGradpaMessage',// 如果沒有提供則使用一個(gè)空函數(shù)作為默認(rèn)值default: () => {}}
}

vue3.x 使用

在 Vue 3.x 中，provide 和 inject 的使用方式有所變化，主要是因?yàn)橐肓?Composition API。在 Composition API 中，provide 和 inject 的使用更加靈活，并且通常在 setup 函數(shù)中進(jìn)行操作。

注意事項(xiàng):

1. Composition API 中的使用：

• 在 Vue 3.x 中，provide 和 inject 必須在 setup 函數(shù)中使用。

• provide 通常用來(lái)向子組件提供數(shù)據(jù)或方法。

• inject 用來(lái)從父組件或其他祖先組件獲取數(shù)據(jù)或方法。

2. 響應(yīng)式處理：

• 當(dāng)使用 provide 提供一個(gè)響應(yīng)式對(duì)象時(shí)，Vue 3.x 會(huì)自動(dòng)處理它的響應(yīng)性。然而，如果提供的數(shù)據(jù)不是響應(yīng)式的，那么注入的數(shù)據(jù)也不會(huì)是響應(yīng)式的。

3. 類型安全：

• 在 TypeScript 項(xiàng)目中，可以使用類型注解來(lái)確保 provide 和 inject 的類型安全。

4. 默認(rèn)值：

• 在 Vue 3.x 中，inject 可以接受一個(gè)默認(rèn)值作為第二個(gè)參數(shù)，如果找不到對(duì)應(yīng)的 provide 數(shù)據(jù)，則使用默認(rèn)值。

5. 調(diào)試：

• 使用 provide 和 inject 時(shí)，確保在開發(fā)過(guò)程中使用 Vue Devtools 來(lái)幫助跟蹤數(shù)據(jù)流。

示例

grandpa.vue 組件(爺)

• 使用 provide 方法提供了 message, message2 字符串和一個(gè) sendGradpaMessage 方法。

• sendGradpaMessage 方法用于接收子組件傳遞的消息。

// grandpa.vue<template><div class="grandpa"><h2>爺組件</h2><div>{{ num1 }}</div><parent /></div>
</template><script setup lang="ts" name="grandpa">
import { provide, ref } from 'vue';import parent from './parent.vue';// 定義一個(gè)可變的值
const message = ref('Hello from grandpa');
const message2 = ref('Hello from Parent');let num1 = ref(0);
// 使用 provide 將這個(gè)值暴露給子組件
provide('message', message);
provide('message2', message2);
provide('sendGradpaMessage', getSendMessage);// 接受 son 組件傳遞的參數(shù)
function getSendMessage(num: number) {console.log('msg::: ', num);num1.value = num
}
</script>

parent.vue 組件(父)

• 使用 inject 方法注入了從爺組件提供的 message2 參數(shù)。

// parent.vue<template><div class="parent"><h2>父組件</h2><span>{{ message2 }}</span><son /></div>
</template><script setup lang="ts" name="parent">
import son from './son.vue';
import { inject, onMounted } from 'vue';// 使用 inject 獲取父組件提供的值
const message2 = inject('message2');
</script>

son.vue 組件(子)

• 使用 inject 方法注入了從爺組件提供的 message2 字符串和一個(gè) sendGradpaMessage 方法。

• 當(dāng)點(diǎn)擊按鈕時(shí)，調(diào)用 sendGradpaMessage 方法將消息傳遞給祖先組件。

// son.vue<template><div class="son"><h2>孫組件</h2><div>{{ message }}</div><el-button type="primary" @click="sendMessage(111)">發(fā)送消息</el-button></div>
</template><script setup lang="ts" name="son">import { inject, onMounted } from 'vue';// 使用 inject 獲取父組件提供的值
const message = inject('message', '默認(rèn)值');const sendMessage = inject('sendGradpaMessage', (params: number) => { });</script>

上述示例中:

• grandpa.vue 組件通過(guò) provide 方法提供了 message, message2 兩個(gè)參數(shù)和一個(gè)名為 sendGradpaMessage 的方法。

• parent.vue 組件通過(guò) inject 接收了 message 參數(shù)，并在模板中使用 message。

• son.vue 組件通過(guò) inject 接收了 message2 參數(shù)，并在模板中使用 message，同時(shí)通過(guò)點(diǎn)擊按鈕觸發(fā) sendGradpaMessage 方法將參數(shù) msg 傳給了 grandpa.vue 組件。

總結(jié)

provide 和 inject 是 Vue.js 中一種用于跨越多個(gè)層級(jí)組件間通信的機(jī)制，通過(guò)在組件中定義 provide 方法提供數(shù)據(jù)或方法，并在其他組件中使用 inject 方法注入這些數(shù)據(jù)或方法，從而簡(jiǎn)化了多層級(jí)組件間的通信。這種方式不僅減少了逐層傳遞 props 的代碼量，提高了代碼的可讀性和可維護(hù)性，還支持動(dòng)態(tài)提供和注入數(shù)據(jù)，適用于多種場(chǎng)景。然而，過(guò)度使用 provide 和 inject可能會(huì)導(dǎo)致組件之間的耦合度增加，影響代碼的調(diào)試和維護(hù)。