一、概念解析
成對出現:provide和inject是成對出現的
作用:用於父組件向子孫組件傳遞數據
使用方法:provide在父組件中返回要傳給下級的數據,inject在需要使用這個數據的子輩組件或者孫輩等下級組件中注入數據。
使用場景:由於vue有$parent屬性可以讓子組件訪問父組件。但孫組件想要訪問祖先組件就比較困難。通過provide/inject可以輕松實現跨級訪問父組件的數據
二、代碼解析
或者 另外一種理解:
provider/inject:簡單的來說就是在父組件中通過provider來提供變量,然后在子組件中通過inject來注入變量
需要注意的是這里不論子組件有多深,只要調用了inject那么就可以注入provider中的數據。而不是局限於只能從當前父組件的prop屬性來獲取數據。
從上面這個例子可以看出,只要在父組件中調用了,那么在這個父組件生效的生命周期內,所有的子組件都可以調用inject來注入父組件中的值。
轉載自https://www.jianshu.com/p/d316b493e92c