之前本人寫過幾篇element ui原始碼解析，其中提到provide/inject，當時只是匆匆帶過，沒有做深入研究，直到後來一次開發，需要實現孫元件更改父元件的值才想起來，原來這一對屬性有如此大的用途且相當方便，因此這裡做個總結，順便做個簡單的demo。
ps:
下面提到的父元件，子元件，孫元件只是為了說明三個層級，方便大家理解而已
實現的場景如下：
1、三個元件：父元件，子元件，孫元件，父引用子，子引用孫
2、父元件有個屬性：showdia。子元件，孫元件都可能更改這個屬性的值，以實現父元件中某個彈窗顯示隱藏
第一種實現方法：利用props
由於props只能實現向子元件傳遞引數不能實現直接向孫元件傳遞引數，因此每巢狀一級就需要手動傳遞引數，巢狀層次越深體驗就越糟糕，有點像非同步請求巢狀，簡直是夢魘般的存在
// 父元件引用子元件，需要顯式傳值// 子元件引用孫元件，需要顯式傳值
// 孫元件要修改父元件showdia的值
this.$parent.$parent.showdia = !this.$parent.$parent.showdia
在孫元件中需要修改父元件值時，有幾層巢狀就需要寫幾個$parent，這樣做實在沒水平
第二種實現方法：provide/inject
父元件只要提供provide，子元件和孫元件用inject注入即可，看**
// 父元件提供this物件，供子孫元件注入provide()
}// 子元件注入
inject: ['thisobj']
// 孫元件注入
inject: ['thisobj']
// 孫元件修改父元件的值
this.thisobj.showdia = !this.thisobj.showdia
不管巢狀幾級，修改父元件屬性都是一樣的寫法，是不是相當方便
Vue 依賴注入 provide inject
provide inject是解決元件之間的通訊問題的利器，不受層級結構的限制。小白，修改乙個官網的例子 doctype html utf 8 title js vue2.6.js script h1 h2 h3 style head dynamic component demo border 1p...
vue 頁面重新整理 provide inject
html 部分 原本 修改之後 isrouteralive js 部分 export default data watch created methods computed 其他頁面使用方法 export default watch created computed 在哪個方法呼叫就在 寫 this...
vue 初步了解provide inject
provider inject 簡單的來說就是在父元件中通過provider來提供變數，然後在子元件中通過inject來注入變數。需要注意的是 provide inject這對選項需要一起使用,以允許乙個祖先元件向其所有子孫後代注入乙個依賴，不論元件層次有多深，並在起上下游關係成立的時間裡始終生效。...