淺談vue中provide和inject用法(父組件向孫組件傳值)


一、概念解析

成對出現:provide和inject是成對出現的

作用:用於父組件向子孫組件傳遞數據

使用方法:provide在父組件中返回要傳給下級的數據,inject在需要使用這個數據的子輩組件或者孫輩等下級組件中注入數據。

使用場景:由於vue有$parent屬性可以讓子組件訪問父組件。但孫組件想要訪問祖先組件就比較困難。通過provide/inject可以輕松實現跨級訪問父組件的數據

二、代碼解析

或者 另外一種理解:

provider/inject:簡單的來說就是在父組件中通過provider來提供變量,然后在子組件中通過inject來注入變量

需要注意的是這里不論子組件有多深,只要調用了inject那么就可以注入provider中的數據。而不是局限於只能從當前父組件的prop屬性來獲取數據。

從上面這個例子可以看出,只要在父組件中調用了,那么在這個父組件生效的生命周期內,所有的子組件都可以調用inject來注入父組件中的值。
轉載自https://www.jianshu.com/p/d316b493e92c


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM