vue 初步了解provide/inject

provider/inject：簡單的來說就是在父組件中通過provider來提供變量，然后在子組件中通過inject來注入變量。

需要注意的是 provide / inject這對選項需要一起使用,以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，並在起上下游關系成立的時間里始終生效。

 (這里不論子組件有多深，只要調用了inject那么就可以注入provider中的數據。而不是局限於只能從當前父組件的prop屬性來獲取數據。)

eg：

 

父組件中提供
  provide() {
    return {
      map_nodeObj: { map_node: this.obj }
      // 提示：provide 和 inject 綁定並不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監聽的對象，那么其對象的屬性還是可響應的。
    }
  },

 

子組件中引入
  inject: {
    map_nodeObj: {
      default: () => {
        return {map_node: '0'}
      }
    }
  },
使用： this.map_nodeObj.map_node

 

 

運行順序：

 

data
provide
created  // 在這個階段$el還未生成，在這先處理privide的邏輯，子孫組件才可以取到inject的值
mounted
...

 

 

provide/inject的缺點：

 

這么做也是有明顯的缺點的，在任意層級都能訪問導致數據追蹤比較困難，不知道是哪一個層級聲明了這個或者不知道哪一層級或若干個層級使用了，因此這個屬性通常並不建議使用能用vuex的使用vuex，不能用的多傳參幾層，但是在做組件庫開發時，不對vuex進行依賴，且不知道用戶使用環境的情況下可以很好的使用