依賴注入-inject provide

在 Vue3 中，我們可以使用 provide 和 inject 來實現祖先組件和後代組件之間的數據傳遞。這種方式主要用於組件之間的通信，特別是對於那些深度嵌套的組件，我們可以使用 provide 和 inject 來避免每個組件都需要通過 props 來傳遞數據。

下面是一個簡單的例子：

import { provide, inject } from "vue";

const SymbolKey = Symbol();

export default {
    setup() {
        provide(SymbolKey, "我是祖先組件的數據");
    },
};

在上面的代碼中，我們在祖先組件中使用 provide 方法，並傳入兩個參數：一個是我們自定義的鍵（在這個例子中，我們使用了 ES6 的 Symbol 來創建一個唯一的鍵），另一個是我們想要提供給後代組件的數據。

然後，在後代組件中，我們可以使用 inject 方法來接收這個數據：

import { inject } from "vue";

const SymbolKey = Symbol();

export default {
    setup() {
        const data = inject(SymbolKey);
        console.log(data); // 輸出：我是祖先組件的數據
    },
};

在上面的代碼中，我們在後代組件中使用 inject 方法，並傳入我們在祖先組件中定義的鍵，這樣就可以獲取到祖先組件提供的數據了。

需要注意的是，provide 和 inject 是一對，必須一起使用。

依赖注入 | Vue.js