一、Prop 逐級透傳問題

vue中我們要從父組件向子組件傳遞數(shù)據(jù)時，會使用 props。

如果需要給深層子組件傳遞數(shù)據(jù)，會非常麻煩，

如下圖：

provide 和 inject 可以幫助我們解決這一問題。

一個父組件相對于其所有的后代組件，會作為依賴提供者。

任何后代的組件樹，無論層級有多深，都可以注入由父組件提供給整條鏈路的依賴。

二、Provide (提供)

要為組件后代提供數(shù)據(jù)，需要使用到 provide() 函數(shù)：

如果不使用 <script setup>，請確保 provide() 是在 setup() 同步調(diào)用的：

provide() 函數(shù)接收兩個參數(shù)。第一個參數(shù)被稱為注入名，可以是一個字符串或是一個 Symbol。

后代組件會用注入名來查找期望注入的值。

一個組件可以多次調(diào)用 provide()，使用不同的注入名，注入不同的依賴值。

第二個參數(shù)是提供的值，值可以是任意類型，包括響應(yīng)式的狀態(tài)，比如一個 ref：

提供的響應(yīng)式狀態(tài)使后代組件可以由此和提供者建立響應(yīng)式的聯(lián)系。

三、應(yīng)用層 Provide

除了在一個組件中提供依賴，我們還可以在整個應(yīng)用層面提供依賴：

在應(yīng)用級別提供的數(shù)據(jù)在該應(yīng)用內(nèi)的所有組件中都可以注入。

這在你編寫插件時會特別有用，因為插件一般都不會使用組件形式來提供值。

四、Inject (注入)

要注入上層組件提供的數(shù)據(jù)，需使用 inject() 函數(shù)：

如果提供的值是一個 ref，注入進來的會是該 ref 對象，而不會自動解包為其內(nèi)部的值。

這使得注入方組件能夠通過 ref 對象保持了和供給方的響應(yīng)性鏈接。

同樣的，如果沒有使用 <script setup>，inject() 需要在 setup() 內(nèi)同步調(diào)用：

五、注入默認(rèn)值

默認(rèn)情況下，inject 假設(shè)傳入的注入名會被某個祖先鏈上的組件提供。

如果該注入名的確沒有任何組件提供，則會拋出一個運行時警告。

如果在注入一個值時不要求必須有提供者，那么我們應(yīng)該聲明一個默認(rèn)值，和 props 類似：

在一些場景中，默認(rèn)值可能需要通過調(diào)用一個函數(shù)或初始化一個類來取得。

為了避免在用不到默認(rèn)值的情況下進行不必要的計算或產(chǎn)生副作用，我們可以使用工廠函數(shù)來創(chuàng)建默認(rèn)值：

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論