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]
    }
  }
}