vue的provide / inject

vue的provide/inject

provide/inject 這對選項須要一塊兒使用，以容許一個祖先組件向其全部子孫後代注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裏始終生效。

說明

1. 不管多少層都會被子組建拿到
2. 主要用在高階組件
3. provide 選項應該是一個對象或返回一個對象的函數。
4. inject 選項應該是：一個字符串數組，或 一個對象，對象的 key 是本地的綁定名，

特別說明

提示：provide 和 inject 綁定並非可響應的。這是刻意爲之的。然而，若是你傳入了一個可監聽的對象，那麼其對象的屬性仍是可響應的。

最近就碰到了這個問題

// 父級組件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子組件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

按照上邊的例子，發現若是修改了Provider的foo值，Child的foo並無隨着更改。官網也說了provide並非響應的。爲了解決這個問題 須要把foo變成vue的監聽的對象，換句話說就是須要把foo變成對象

var Provider = {
 provide() {
    return {datas:this.contain
  }},
  data() {
    return {
      contain:{
        foo:'foo'
      }
    };
  },
}
var Child = {
  inject: ['datas'],
  created () {
    console.log(this.datas.foo) // => "foo"
  }
  // ...
}

這樣修改以後foo就是響應的了