Vuejs選項： provide/inject

provide 和 inject 是成對出現的：

　　provide： 父級（或者更外層的組件）組件 提供的可供子組件（或這更內層組件）注入的屬性；

　　　　　　　而不必這個內層組件處於什么層級；

　　inject： 內層組件可注入的屬性（屬性由外層組件提供），是內層組件可直接訪問外層組件的某個屬性或方法，而不必暴漏整個實例；

　　　　　　不必知道這個注入屬性是由哪外層組件暴漏的；

　　共同點： 注入屬性和props類似，都是通過顯示聲明的；

　　這對選項需要一起使用，以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，並在起上下游關系成立的時間里始終生效。如果你熟悉 React，這與 React 的上下文特性很相似。

使用場景：

　　provide 和 inject 主要在開發高階插件/組件庫時使用。並不推薦用於普通應用程序代碼中。

 

參考：

https://cn.vuejs.org/v2/api/#provide-inject

https://cn.vuejs.org/v2/guide/components-edge-cases.html#%E4%BE%9D%E8%B5%96%E6%B3%A8%E5%85%A5

　　

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

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


// 使用一個注入的值作為一個屬性的默認值：
const Child = {
  inject: ['foo'],
  props: {
    bar: {
      default () {
        return this.foo
      }
    }
  }
}

// 使用一個注入的值作為數據入口：
const Child = {
  inject: ['foo'],
  data () {
    return {
      bar: this.foo
    }
  }
}

// 與 prop 的默認值類似，你需要對非原始值使用一個工廠方法：
const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: () => [1, 2, 3]
    }
  }
}