🤍 前端開發工程師、技術日更博主、已過CET6
🍨 阿珊和她的貓_CSDN博客專家、23年度博客之星前端領域TOP1
🕠 牛客高級專題作者、打造專欄《前端面試必備》 、《2024面試高頻手撕題》、《前端求職突破計劃》
🍚 藍橋云課簽約作者、上架課程《Vue.js 和 Egg.js 開發企業級健康管理項目》、《帶你從入門到實戰全面掌握 uni-app》

在 Vue3 中，provide 和 inject 是用于實現跨組件層級通訊的 API。

provide

provide 允許一個祖先組件向其所有子孫組件注入一個值，不論組件層次有多深，并在起始和終點組件中使用。

使用 provide

import { provide } from 'vue';export default {
setup() {
const sharedState = reactive({ message: 'Hello from ancestor' });// 提供 sharedState 給所有子孫組件
provide('sharedState', sharedState);
}
};

inject

inject 允許后代組件接收祖先組件通過 provide 提供的值。

使用 inject

import { inject } from 'vue';export default {
setup() {
// 注入祖先組件提供的 sharedState
const sharedState = inject('sharedState');return {
sharedState
};
}
};

特點

• 跨層級通訊：provide 和 inject 可以實現跨多個層級的組件通訊。
• 解耦：使用 provide 和 inject 可以減少組件之間的直接依賴，使得組件更加獨立和可復用。
• 響應式：通過 provide 提供的響應式數據，注入的組件也能響應數據的變化。

注意事項

• provide 和 inject 主要用于解決多層級組件間的狀態共享問題，不應該濫用，以避免造成難以理解和維護的狀態管理。
• 提供的數據默認是響應式的，如果不需要響應式，可以使用 readonly 包裝。

總結

provide 和 inject 是 Vue3 中用于實現跨組件層級通訊的強大工具。它們提供了一種簡潔的方式來共享狀態，避免了 props 層層傳遞的繁瑣。合理使用 provide 和 inject 可以提高組件的復用性和可維護性。