在 Vue 3 中，組件之間的通信方式有多種，例如 props 和 emit 用於父子組件之間的通信，event bus 或 Vuex（或 Pinia）用於跨組件或全局狀態管理。當我們需要在父級與多個深層次子組件之間進行數據傳遞時，Provide 和 Inject 則提供了一個方便且輕量的解決方案。它允許祖先組件將數據提供給任意深度的後代組件，而不需要在每一層組件間傳遞 props，大大簡化了層級深的組件間通信。

Provide 和 Inject 的基本概念

• Provide：父組件（或祖先組件）可以使用 provide 將某些數據或方法提供給其子組件，這些數據可以是簡單的變量，也可以是函數、對象等。

• Inject：子組件（或後代組件）可以使用 inject 來接收來自祖先組件的數據。inject 接收的內容可以是祖先組件的 provide 提供的值。

這種模式類似於“依賴注入”（Dependency Injection），父級提供依賴，子級直接消費依賴而不需要知道其具體如何傳遞，從而降低了組件間的耦合度

使用場景

• 跨多層組件的數據傳遞：如果有一個多層級的組件樹，子組件需要使用父組件的一些數據或方法，直接通過 props 一層層傳遞會變得繁瑣，這時候 provide 和 inject 就能大展身手。

• 避免組件樹中的 props drilling：當多個嵌套層級的組件需要共享數據時，通過 props 逐層傳遞會產生大量冗餘的代碼，而 provide 和 inject 可以直接跳過中間層，將數據從祖先組件傳遞到深層子組件。

Provide 和 Inject 的基本用法

下面通過一個簡單的例子來演示 provide 和 inject 的用法：

<!-- App.vue -->
<template>
  <div>
    <ParentComponent />
  </div>
</template>

<script>
import { provide, ref } from 'vue';
import ParentComponent from './components/ParentComponent.vue';

export default {
  components: { ParentComponent },
  setup() {
    // 定義提供的數據
    const message = ref('Hello from App Component');
    provide('message', message);
  }
};
</script>

在上面的 App.vue 中，我們使用 provide 提供了一個名為 message 的數據。接下來，在 ParentComponent 的子組件中，我們可以使用 inject 來獲取這個數據。

<!-- ParentComponent.vue -->
<template>
  <div>
    <p>Parent Component</p>
    <ChildComponent />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
};
</script>

在 ChildComponent 中，我們使用 inject('message') 接收 App.vue 提供的 message，然後將其顯示在頁面上。這樣，即使 ParentComponent 沒有直接參與數據傳遞，ChildComponent 還是能夠獲取到數據。

Provide 和 Inject 的默認值

在某些情況下，如果祖先組件沒有提供對應的數據，可以給 inject 設置一個默認值。這樣在沒有找到提供的值時，inject 會使用這個默認值。

const injectedMessage = inject('message', 'Default message if not provided');

動態提供數據

provide 和 inject 並不僅限於靜態數據的傳遞，還可以傳遞動態變量。這意味著，如果 provide 中的數據是響應式的，那麼 inject 接收到的數據也是響應式的。

const count = ref(0);
provide('count', count);

在子組件中，當 count 改變時，子組件中 inject 的值也會自動更新，這確保了跨層級的數據同步。

Provide 和 Inject 的使用限制

儘管 provide 和 inject 為組件間通信提供了方便的方式，但它們並不適合用於所有場景。以下是一些需要考慮的限制：

• 作用範圍限制：provide 和 inject 只在父子組件（包括祖先與後代組件）之間有效，無法跨越無關的組件層級。

• 不可進行雙向數據綁定：inject 僅用於接收數據，如果需要讓子組件向父組件反向通信，仍需使用事件或狀態管理工具。

Provide 和 Inject 的高級用法：傳遞方法

除了傳遞數據，provide 和 inject 還可以用來傳遞方法。這在某些情況下特別有用，例如祖先組件需要將某些操作的控制權交給後代組件時。

const changeMessage = () => {
  message.value = 'Updated Message from Parent';
};
provide('changeMessage', changeMessage);

在子組件中，通過 inject 接收到這個方法，並在需要時調用：

const changeMessage = inject('changeMessage');
changeMessage();

結論

Provide 和 Inject 是 Vue 3 中非常實用的跨層級通信方式，特別適合用於祖先與深層次後代組件之間的數據共享。它們讓我們可以避免繁瑣的 props drilling，使得組件間通信更加靈活和簡潔。儘管如此，在應用時仍需注意它們的使用範圍和限制，以確保應用的穩定性和可維護性。在 Vue 3 中靈活運用這些工具，可以讓你的應用在數據管理上更加高效。