Vue-依賴注入 provide & inject

一般而言，組件之間的資料傳遞，可以使用 props 來達成，不過一旦層級過多的時候，props 就要逐層向下傳遞，會越來越麻煩且複雜。

而 provide、inject 可以解決這個問題，它可以提供一個「源頭」，子組件們可以藉由同一個源頭取得對應的資料，且沒有層級分別，都可以取得，就不用逐層傳遞資料了。允許你在父組件中提供一些值，然後在它的子孫組件中使用 inject 來訪問這些值。下面是一個 provide & inject 的範例：

<!-- ParentComponent.vue (父組件) -->
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script setup>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

const sharedValue = 'Hello from parent';

provide('sharedValue', sharedValue);
</script>

父組件 ParentComponent.vue 使用 provide 來提供一個值 'Hello from parent'。這個值被命名為 sharedValue，並作為 provide 的第一個參數傳遞。

<!-- ChildComponent.vue (子組件) -->
<template>
  <div>
    <p>{{ sharedValue }}</p>
  </div>
</template>

<script setup>
import { inject } from 'vue';

const sharedValue = inject('sharedValue');
</script>

在子組件 ChildComponent.vue 中，我們使用 inject 來訪問父組件提供的值。我們在 inject 中傳遞的參數是父組件提供的值的名稱，這裡是 'sharedValue'。然後，我們將返回的值賦值給 sharedValue 變量。

這樣的話，子組件就可以訪問到父組件提供的值了。這在需要在多個組件之間共享狀態或者方法時非常有用。提供的值可以是任何類型，包括數據、函數或對象。