vue provide / inject的理解與運用

參考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.導致組件間的耦合
它將導致組件于組件間的耦合僵井,使得組件復用性受到影響陕截。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市批什,隨后出現(xiàn)的幾起案子农曲,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,270評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件乳规,死亡現(xiàn)場離奇詭異形葬,居然都是意外死亡,警方通過查閱死者的電腦和手機暮的,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評論 3 395
  • 文/潘曉璐 我一進店門笙以,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人冻辩,你說我怎么就攤上這事猖腕。” “怎么了恨闪?”我有些...
    開封第一講書人閱讀 165,630評論 0 356
  • 文/不壞的土叔 我叫張陵谈息,是天一觀的道長。 經(jīng)常有香客問我凛剥,道長侠仇,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,906評論 1 295
  • 正文 為了忘掉前任犁珠,我火速辦了婚禮逻炊,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘犁享。我一直安慰自己余素,他們只是感情好,可當我...
    茶點故事閱讀 67,928評論 6 392
  • 文/花漫 我一把揭開白布炊昆。 她就那樣靜靜地躺著桨吊,像睡著了一般。 火紅的嫁衣襯著肌膚如雪凤巨。 梳的紋絲不亂的頭發(fā)上视乐,一...
    開封第一講書人閱讀 51,718評論 1 305
  • 那天,我揣著相機與錄音敢茁,去河邊找鬼佑淀。 笑死,一個胖子當著我的面吹牛彰檬,可吹牛的內(nèi)容都是我干的伸刃。 我是一名探鬼主播,決...
    沈念sama閱讀 40,442評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼逢倍,長吁一口氣:“原來是場噩夢啊……” “哼捧颅!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起较雕,我...
    開封第一講書人閱讀 39,345評論 0 276
  • 序言:老撾萬榮一對情侶失蹤碉哑,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體谭梗,經(jīng)...
    沈念sama閱讀 45,802評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡忘晤,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,984評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了激捏。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片设塔。...
    茶點故事閱讀 40,117評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖远舅,靈堂內(nèi)的尸體忽然破棺而出闰蛔,到底是詐尸還是另有隱情,我是刑警寧澤图柏,帶...
    沈念sama閱讀 35,810評論 5 346
  • 正文 年R本政府宣布序六,位于F島的核電站,受9級特大地震影響蚤吹,放射性物質(zhì)發(fā)生泄漏例诀。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,462評論 3 331
  • 文/蒙蒙 一裁着、第九天 我趴在偏房一處隱蔽的房頂上張望繁涂。 院中可真熱鬧,春花似錦二驰、人聲如沸扔罪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽矿酵。三九已至,卻和暖如春矗积,著一層夾襖步出監(jiān)牢的瞬間全肮,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1 272
  • 我被黑心中介騙來泰國打工漠魏, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留倔矾,地道東北人。 一個月前我還...
    沈念sama閱讀 48,377評論 3 373
  • 正文 我出身青樓柱锹,卻偏偏與公主長得像,于是被迫代替她去往敵國和親丰包。 傳聞我的和親對象是個殘疾皇子禁熏,可洞房花燭夜當晚...
    茶點故事閱讀 45,060評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 訪問元素 & 組件 在絕大多數(shù)情況下,我們最好不要觸達另一個組件實例內(nèi)部或手動操作 DOM 元素邑彪。不過也確實在一些...
    前端菜籃子閱讀 729評論 0 0
  • 摘要: 總有一款合適的通信方式瞧毙。 作者:浪里行舟 Fundebug經(jīng)授權(quán)轉(zhuǎn)載,版權(quán)歸原作者所有。 前言 組件是 v...
    Fundebug閱讀 15,574評論 3 57
  • 官網(wǎng)傳送門:inject[https://cn.vuejs.org/v2/api/#provide-inject]...
    果汁涼茶丶閱讀 37,174評論 2 16
  • 背景 ??Vue是單頁面應(yīng)用宙彪,單頁面應(yīng)用又是由組件構(gòu)成矩动,各個組件之間又互相關(guān)聯(lián),那么如何實現(xiàn)組件之間通信就顯得尤為...
    A鄭家慶閱讀 894評論 0 1
  • 1.vue.js的兩個核心是什么释漆? vue.js的兩個核心分別是數(shù)據(jù)驅(qū)動(MVVM)和組件化悲没。 一、數(shù)據(jù)驅(qū)動 數(shù)據(jù)...
    fengcol閱讀 1,068評論 0 3