Vue3中依賴注入provide、inject的使用
一、Prop 逐級透傳問題
vue中我們要從父組件向子組件傳遞數(shù)據(jù)時(shí)，會使用 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)的所有組件中都可以注入。
這在你編寫插件時(shí)會特別有用，因?yàn)椴寮话愣疾粫褂媒M件形式來提供值。
四、Inject (注入)
要注入上層組件提供的數(shù)據(jù)，需使用 inject() 函數(shù)：
如果提供的值是一個 ref，注入進(jìn)來的會是該 ref 對象，而不會自動解包為其內(nèi)部的值。
這使得注入方組件能夠通過 ref 對象保持了和供給方的響應(yīng)性鏈接。
同樣的，如果沒有使用 <script setup>，inject() 需要在 setup() 內(nèi)同步調(diào)用：
五、注入默認(rèn)值
默認(rèn)情況下，inject 假設(shè)傳入的注入名會被某個祖先鏈上的組件提供。
如果該注入名的確沒有任何組件提供，則會拋出一個運(yùn)行時(shí)警告。
如果在注入一個值時(shí)不要求必須有提供者，那么我們應(yīng)該聲明一個默認(rèn)值，和 props 類似：
在一些場景中，默認(rèn)值可能需要通過調(diào)用一個函數(shù)或初始化一個類來取得。
為了避免在用不到默認(rèn)值的情況下進(jìn)行不必要的計(jì)算或產(chǎn)生副作用，我們可以使用工廠函數(shù)來創(chuàng)建默認(rèn)值：
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用elementUI實(shí)現(xiàn)將圖片上傳到本地的示例
今天小編就為大家分享一篇使用elementUI實(shí)現(xiàn)將圖片上傳到本地的示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
一文詳解Vue中keep-alive的實(shí)現(xiàn)原理
在 Vue.js 開發(fā)單頁面應(yīng)用（SPA）時(shí),組件的頻繁創(chuàng)建和銷毀會帶來一定的性能開銷,為了優(yōu)化這一問題,Vue 提供了 keep-alive 組件,本文將深入剖析 keep-alive 的實(shí)現(xiàn)原理,需要的朋友可以參考下2025-10-10
利用vue+elementUI實(shí)現(xiàn)部分引入組件的方法詳解
這篇文章主要給大家介紹了關(guān)于利用vue+elementUI實(shí)現(xiàn)部分引入組件的相關(guān)資料，以及介紹了vue引入elementUI報(bào)錯的解決方法，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
vue.js使用v-model實(shí)現(xiàn)父子組件間的雙向通信示例
這篇文章主要介紹了vue.js使用v-model實(shí)現(xiàn)父子組件間的雙向通信,結(jié)合實(shí)例形式分析了vue.js基于v-model父子組件間的雙向通信的具體實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vant中如何修改用戶的頭像，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)日歷組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
在使用 Vue.js 進(jìn)行開發(fā)時(shí),模板中的 HTML 注釋通常會被 Vue 的編譯器自動移除,然而,在某些情況下,我們可能希望保留這些注釋,例如為了調(diào)試、文檔生成或其他特殊需求,本文將詳細(xì)介紹如何在 Vue 渲染模板時(shí)保留 HTML 注釋,并提供相關(guān)的代碼示例,需要的朋友可以參考下2025-03-03
Vue createRenderer 自定義渲染器從入門到實(shí)戰(zhàn)
本文主要介紹了Vue createRenderer 自定義渲染器從入門到實(shí)戰(zhàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2026-01-01
vue+element多選級聯(lián)選擇器自定義props使用詳解
這篇文章主要給大家介紹了關(guān)于vue+element多選級聯(lián)選擇器自定義props使用的相關(guān)資料,級聯(lián)選擇器展示的結(jié)果都是以數(shù)組的形式展示,也就是v-model綁定的結(jié)果,需要的朋友可以參考下2023-07-07
一步步教你用Vue.js創(chuàng)建一個組件(附代碼示例)
組件(Component)是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展HTML元素,封裝可重用的代碼,下面這篇文章主要給大家介紹了關(guān)于如何一步步用Vue.js創(chuàng)建一個組件的相關(guān)資料,需要的朋友可以參考下2022-12-12