一、Prop 逐級(jí)透傳問題

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

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

如下圖：

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

一個(gè)父組件相對(duì)于其所有的后代組件，會(huì)作為依賴提供者。

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

二、Provide (提供)

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

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

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

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

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

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

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

三、應(yīng)用層 Provide

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

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

這在你編寫插件時(shí)會(huì)特別有用，因?yàn)椴寮话愣疾粫?huì)使用組件形式來提供值。

四、Inject (注入)

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

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

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

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

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

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

如果該注入名的確沒有任何組件提供，則會(huì)拋出一個(gè)運(yùn)行時(shí)警告。

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

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

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

總結(jié)

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

最新評(píng)論