背景

通常情況下，當我們需要從父組件向子組件傳遞數據時，會使用 props。想象一下這樣的結構：有一些多層級嵌套的組件，形成了一顆巨大的組件樹，而某個深層的子組件需要一個較遠的祖先組件中的部分數據。在這種情況下，如果僅使用 props 則必須將其沿著組件鏈逐級傳遞下去，這會非常麻煩：

對於這種組件使用結構，vue3給我們提供了另外一種傳參方式，那就是依賴註入。一個父組件相對於其所有的後代組件，會作為依賴提供者(provide)。任何後代的組件樹，無論層級有多深，都可以註入(inject)由父組件提供給整條鏈路的依賴。

基礎使用

依賴提供者provide()

provide的使用非常簡單，下麵給出代碼。

<script setup lang="ts">
// 1-引入
import { ref, provide } from 'vue';

const param = ref();

// 2-使用
provide('mark', param);
</script>

provide()函數需要傳入兩個參數：

• 第一個參數被稱為註入名，可以是一個字元串或是一個 Symbol。後代組件會用註入名來查找期望註入的值。一個組件可以多次調用 provide()，使用不同的註入名，註入不同的依賴值。
• 第二個參數是提供的值，值可以是任意類型，包括響應式的狀態，比如一個 ref。提供的響應式狀態使後代組件可以由此和提供者建立響應式的聯繫。