詳解Vue 多級(jí)組件透?jìng)餍路椒╬rovide/inject
provide / inject 是 2.2 新增的方法，可以以一個(gè)祖先組件向所有子孫后代注入依賴(lài)（一個(gè)內(nèi)容）。
provider/inject：簡(jiǎn)單的來(lái)說(shuō)就是在父組件中通過(guò)provider來(lái)提供變量，然后在子組件中通過(guò)inject來(lái)注入變量。
Vue 官方警告：
provide 和 inject 主要為高階插件/組件庫(kù)提供用例。并不推薦直接用于應(yīng)用程序代碼中。
當(dāng)然，警告只是警告，你完全可以正常使用。
使用方法非常像 data 和 props 的組合大禮包：
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
唯一的區(qū)別是你不用再一層層的傳入了，過(guò)去用的 event-bus 雖然可以解決深層問(wèn)題，但是會(huì)導(dǎo)致整個(gè) event-emit 組成過(guò)于混亂，難以維護(hù)。使用 provide / inject 可以保證父子單向數(shù)據(jù)流的清晰性。
在 React 中 Context 的 Provider / Consumer 也有相同的效果，由于還沒(méi)有具體使用過(guò)，對(duì) React 本身也只有一面之緣，留待以后在了解，感興趣的同學(xué)可以 閱讀文檔 了解。
參考文章：
Vue 官方文檔
Provide/Inject in Vue 2.2
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于Vue框架vux組件庫(kù)實(shí)現(xiàn)上拉刷新功能
這篇文章主要為大家詳細(xì)介紹了基于Vue框架vux組件庫(kù)實(shí)現(xiàn)上拉刷新功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
Vue.js的核心包括一套“響應(yīng)式系統(tǒng)”。“響應(yīng)式”，是指當(dāng)數(shù)據(jù)改變后，Vue會(huì)通知到使用該數(shù)據(jù)的代碼。例如，視圖渲染中使用了數(shù)據(jù)，數(shù)據(jù)改變后，視圖也會(huì)自動(dòng)更新。2021-05-05
vue 解決provide和inject響應(yīng)的問(wèn)題
這篇文章主要介紹了vue 解決provide和inject響應(yīng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
手把手教你Vue3實(shí)現(xiàn)路由跳轉(zhuǎn)
Vue Router是Vue.js的官方路由器,它與Vue.js核心深度集成,使使用Vue.js構(gòu)建單頁(yè)應(yīng)用程序變得輕而易舉,下面這篇文章主要給大家介紹了關(guān)于Vue3實(shí)現(xiàn)路由跳轉(zhuǎn)的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了淺談vue中$bus的使用和涉及到的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
在?Vue?中使用?dhtmlxGantt?組件時(shí)遇到的問(wèn)題匯總(推薦)
dhtmlxGantt一個(gè)功能豐富的甘特圖插件，支持任務(wù)編輯，資源分配和多種視圖模式，這篇文章主要介紹了在?Vue?中使用?dhtmlxGantt?組件時(shí)遇到的問(wèn)題匯總,需要的朋友可以參考下2023-03-03
vue data變量相互賦值后被實(shí)時(shí)同步的解決步驟
這篇文章主要介紹了vue data變量相互賦值后被實(shí)時(shí)同步的解決步驟，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
17個(gè)vue常用的數(shù)組方法總結(jié)與實(shí)例演示
這篇文章主要介紹了vue中常用的數(shù)組方法,包括：VUE數(shù)組轉(zhuǎn)換字符串，VUE數(shù)組遍歷，VUE數(shù)組過(guò)濾，VUE數(shù)組查詢(xún),VUE數(shù)組排序等功能，需要的朋友可以參考下2022-12-12
Vue Router是Vue提供的路由管理器,將組件與路由一一對(duì)應(yīng)起來(lái),這種對(duì)應(yīng)關(guān)系就路由,這篇文章主要介紹了Vue中vue-router路由使用,需要的朋友可以參考下2024-06-06
vue使用keep-alive無(wú)效以及include和exclude用法解讀
這篇文章主要介紹了vue使用keep-alive無(wú)效以及include和exclude用法解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07