provide inject應用及和props對比

之前本人寫過幾篇element ui源碼解析，其中提到provide/inject，當時只是匆匆帶過，沒有做深入研究，直到后來一次開發，需要實現孫組件更改父組件的值才想起來，原來這一對屬性有如此大的用途且相當方便，因此這里做個總結，順便做個簡單的DEMO。

PS:

下面提到的父組件，子組件，孫組件只是為了說明三個層級，方便大家理解而已

 

實現的場景如下：

1、三個組件：父組件，子組件，孫組件，父引用子，子引用孫

2、父組件有個屬性：showDia。子組件，孫組件都可能更改這個屬性的值，以實現父組件中某個彈窗顯示隱藏

 

第一種實現方法：利用props

由於props只能實現向子組件傳遞參數不能實現直接向孫組件傳遞參數，因此每嵌套一級就需要手動傳遞參數，嵌套層次越深體驗就越糟糕，有點像異步請求嵌套，簡直是夢魘般的存在

// 父組件引用子組件，需要顯式傳值
<sonC :fromParentVal="showDia"></sonC>

// 子組件引用孫組件，需要顯式傳值
<grandSonC :fromGrandSonVal="showDia"></grandSonC>

// 孫組件要修改父組件showDia的值
this.$parent.$parent.showDia = !this.$parent.$parent.showDia

　　

在孫組件中需要修改父組件值時，有幾層嵌套就需要寫幾個$parent，這樣做實在沒水平

 

第二種實現方法：provide/inject

父組件只要提供provide，子組件和孫組件用inject注入即可，看代碼

// 父組件提供this對象，供子孫組件注入
provide() {
    return {
      thisObj: this
    }
}

// 子組件注入
inject: ['thisObj']

// 孫組件注入
inject: ['thisObj']

// 孫組件修改父組件的值
this.thisObj.showDia = !this.thisObj.showDia

　　

不管嵌套幾級，修改父組件屬性都是一樣的寫法，是不是相當方便