vue中的provide和inject（依賴注入）
一、名詞解析
provide：Object | () => Object
inject：Array | { [key: string]: string | Symbol | Object }
provide：提供依賴``是一個對象，或者是一個返回對象的函數。里面呢就包含要給子孫后代的東西，也就是屬性和屬性值。
inject:注入依賴一個字符串數組，或者一個對象，屬性值可以是一個對象，包含from和default默認值
說明：
provide和inject主要在開發高階插件/組件庫時使用，並不推薦用於普通應用程序代碼當中
這對選項是成對使用的。子孫組件想要獲取祖先組件得資源，那么怎么辦呢，總不能一直取父級往上吧，而且這樣代碼結構容易混亂。這個就是這對選項要干的事情。
const child ={
inject :{
foo:{
from: 'bar',
default : 'foo'
}
}
}
from表示在可用的注入內容中搜索用的 key，default當然就是默認值。
這里就是我們說的provide，向下提供信息，這里提供的是當前的vue實例，相當於給了后代一個接口。
這樣在任何的后代組件中，都可以使用inject選項來接收指定的我們想要添加在這個實例上的屬性。
這樣也就可以訪問了，當做當前vue實例的屬性。這樣做的好處，相當於給了一個捷徑，不用使用$parent一級一級的訪問。
我們可以把依賴注入看做一部分“大范圍有效的prop”，除了
- 祖先組件不需要知道哪些后代組件需要使用它提供的屬性
- 后代組件不需要知道被注入的屬性來自哪里
100
provide：Object | () => Object
inject：Array | { [key: string]: string | Symbol | Object }
provide 和
inject 主要為高階插件/組件庫提供用例。 並不推薦直接用於應用程序代碼中。是2.2.0版本 新增的。 這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代
注入一個
依賴，不論組件層次有多深，並在起上下游關系成立的時間里始終生效。
provide 選項應該是一個對象或返回一個對象的函數。該對象包
429
祖先后代
provide &
inject 先簡單的BB一下
Vue中父組件到子組件的通信主要由子組件的props屬性實現。props一層層傳遞，爺爺給孫子還好，如果嵌套了五六層還這么寫，感覺自己就是一個沙雕（別感覺了），所以這里介紹一個 稍微冷門的API
provide/
inject，專門用來跨層級提供數據，現在很多開源庫都使用這個api來做跨層級的數據共享，比如element...
2441
允許一個祖先組件向其所有子孫后代
注入一個
依賴，不論組件層次有多深，並在起上下游關系成立的時間里始終生效
provide 選項允許我們指定我們想要提供給后代組件的數據/方法
provide 選項應該是一個對象或返回一個對象的函數
provide: function () { return { getMap: this.getMap } } // 或者
provide...
2萬+
淺析
provide 和
inject 主要為高階插件/組件庫提供用例。並不推薦直接用於應用程序代碼中。 定義說明：這對選項是一起使用的。以允許一個祖先組件向其所有子孫后代
注入一個
依賴，不論組件層次有多深，並在起上下游關系成立的時間里始終生效。 通俗的說就是：組件得引入層次過多，我們的子孫組件想要獲取祖先組件得資源，那么怎么辦呢，總不能一直取父級往上吧，而且這樣代碼結構容易混亂。這個就是...
580
provide：Object | () => Object
inject：Array | { [key: string]: string | Symbol | Object }
provide 和
inject 主要為高階插件/組件庫提供用例。並不推薦直接用於應用程序代碼中。是2.2.0版本 新增的。 這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代
注入一個
依賴，不論組件層次有多深，...
176
一、前言
provide選項允許我們指定我們想要提供給子組件的數據/方法。在子組件種通過
inject選項就可以使用
provide提供的數據或方法。不論組件層次有多深，都可以調用。 唯一的缺點是：
依賴
注入所提供的數據是非響應式。比如說我在父組件種有個數據變量是響應式的接收用戶輸入的數據，然后我通過
provide把這個數據變量提供給子組件使用，但是在子組件里面，這個變量不是實時變化的。要想得到最...
121
我們在進行組件傳值時會有這樣一個問題： 當一個祖先組件想要向他的子孫組件傳值時甚至向多個子孫傳遞一樣的值時，按照往常的方法，需要一層一層的向下進行傳值而且多個子孫組件傳遞就更加繁瑣，增加大量的代碼量，那在這樣的情景下如何讓傳值變得更加簡單呢？ 那么這時我們可以用到
依賴
注入的辦法，他用到了
vue給我提供的兩個新的實例項，分別是
provide 和
inject。 那么看下這兩個實例項的使用方法：
provide 選項允許我們指定我們想要提供給后代組件的數據/方法。也就是說只要給祖先組件添加了這樣一個實例項后，我
94
provide 和
inject 主要在開發高階插件/組件庫時使用。並不推薦用於普通應用程序代碼中。 這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代
注入一個
依賴，不論組件層次有多深，並在起上下游關系成立的時間里始終生效
provide：是一個對象，或者是一個返回對象的函數。里面呢就包含要給子孫后代的東西，也就是屬性和屬性值。
inject：一個字符串數組，或者是一個對象。屬性值可以是一個...
2462
在寫
vue的時候經常會遇到一種情況：可能一個參數在許多組件中會用到，或者是組件
中的一個子組件需要用到父組件的父組件的某些參數。 那么這個時候為了避免組件重復傳參，使用
vue的
依賴
注入是個不錯的方法，直接在最外層組件設置一個
provide，內部不管多少嵌套都可以直接取到最外層的參數。但是假如我們需要的這個參數是需要請求后台接口返回或者說需要計算得來的呢，我就遇到了這么一個坑，先看代碼： // 父...
1069
官網描述是：
provide選項允許我們指定我們想要提供給后代組件的數據/方法。在這個例子中，就是<google-map>內部的getMap方法：
provide: function () { return { getMap: this.getMap } } 然后在任何后代組件里，我們都可以使用
inject選項來接收指定的我們想要添加在這個實例上的...
©️2020 CSDN
皮膚主題: 游動-白
設計師:上身試試
返回首頁
-
442
-
積分
-
1
-
粉絲
-
2
-
獲贊
-
0
-
評論
-
1
-
收藏
暫無認證
