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