詳解Vue 多級組件透傳新方法provide/inject
更新時間：2018年05月09日 09:04:11 作者：敖天羽
這篇文章主要介紹了詳解Vue 多級組件透傳新方法provide/inject，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
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)文章
這篇文章主要為大家詳細(xì)介紹了vue獲取驗(yàn)證碼倒計(jì)時組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
本篇文章主要介紹了詳解webpack打包vue時提取css，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了vue 兄弟組件的信息傳遞的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細(xì)介紹了Vue通過input篩選數(shù)據(jù)的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
Vue實(shí)現(xiàn)簡單可擴(kuò)展甘特圖的方法詳解
Ganttastic是一個小型的Vue.js組件，用于在Web應(yīng)用程序上呈現(xiàn)一個可配置的、可拖動的甘特圖。本文就將用它來實(shí)現(xiàn)簡單可擴(kuò)展的甘特圖，感興趣的可以嘗試一下2022-11-11
這篇文章主要介紹了從vue源碼看Vue.set()和this.$set()的相關(guān)知識,我們先來從Vue提供的Vue.set()和this.$set()這兩個api看看它內(nèi)部是怎么實(shí)現(xiàn)的。感興趣的朋友跟隨小編一起看看吧2018-08-08
本篇文章主要介紹了了解VUE的render函數(shù)的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
vue?el-table中使用el-select選中后無效的解決
這篇文章主要介紹了vue?el-table中使用el-select選中后無效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue中常用的縮寫方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue3兼容大部分Vue2的特性，用Vue2代碼開發(fā)Vue3都可以，性能上面打包大小減少 41%，初次渲染快 55%，更新快 133%，內(nèi)存使用減少 54%,本篇文章主要介紹Vue3的7種種組件通信,需要的朋友可以參考下面文章的具體內(nèi)容2021-09-09