一般而言，組件之間的資料傳遞，可以使用 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 變量。
這樣的話，子組件就可以訪問到父組件提供的值了。這在需要在多個組件之間共享狀態或者方法時非常有用。提供的值可以是任何類型，包括數據、函數或對象。
