參考https://cn.vuejs.org/v2/api/#provide-inject
provide / inject理解
在vue的官方文檔是這樣解釋的:這對選項需要一起使用,以允許一個祖先組件向其所有子孫后代注入一個依賴,不論組件層次有多深,并在起上下游關(guān)系成立的時間里始終生效祝迂。
簡單的來講这溅,它作用還是為了向子組件傳遞數(shù)據(jù)沉噩,和prop
類似。
provide / inject運用場景
既然和prop作用類似鹦付,為什么還需要provide / inject
呢昆禽?
因為在現(xiàn)實的項目中蝗蛙,我的一個組件嵌套著好幾層組件,如果運用prop一層層的嵌套傳遞醉鳖,就非常的麻煩捡硅。而provide / inject
就解決了這個問題,只要在頂層父級provide
里聲明對象或方法辐棒,那么下一層級無論多深都能夠通過inject
來訪問到provide
的數(shù)據(jù)病曾。
有人會問為什么不用vuex,簡單省事漾根,有很多為了這個引入vuex會導致代碼性價比比較低,項目本身沒有使用vuex的必要
那么這種情況下provide / inject就登場了
provide 是加強版的 prop
inject 是加強版的 props
我們來看看一下栗子:
<google-map>
<google-map-region >
<google-map-markers></google-map-markers>
</google-map-region>
</google-map>
我們需要向“google-map-region”和“google-map-markers”傳遞一個屬性鲫竞,我給這樣辐怕,在<google-map> 添加一個provide
選項, provide
選項內(nèi)部添加一個 getMap 方法:
provide: function () {
return {
getMap: this.getMap
}
}
然后在google-map-region和google-map-markers組件里从绘,我們都可以使用 inject 選項來接收指定的我們想要添加在這個實例上的屬性:
inject: ['getMap']
provide / inject缺點
1.無法追蹤數(shù)據(jù)的來源
在任意層級都能訪問導致數(shù)據(jù)追蹤比較困難寄疏,不知道是哪一個層級聲明了這個或者不知道哪一層級或若干個層級使用了。
2.導致組件間的耦合
它將導致組件于組件間的耦合僵井,使得組件復用性受到影響陕截。