vue中的provide和inject
阿新 • • 發佈：2022-05-12
解析：
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當然就是預設值。
示例
案例展示
父元件
專案最外層的佈局元件layout
這裡就是provide，向下提供資訊，提供的是當前的vue例項，相當於給了後代一個介面。
這樣在任何的後代元件中，都可以使用inject選項來接收指定的我們想要新增在這個例項上的屬性。
子元件
layout元件中的router-view 可能路由進來很多其它子孫元件，比如order
這樣也就可以訪問了，當做當前vue例項的屬性。這樣做的好處，相當於給了一個捷徑，不用使用$parent一級一級的訪問。
我們可以把依賴注入看做一部分“大範圍有效的prop”，除了
- 祖先元件不需要知道哪些後代元件需要使用它提供的屬性
- 後代元件不需要知道被注入的屬性來自哪裡