组件通信之祖孙组件通信 （provide / inject）

provide/inject这对选项需要一起使用，允许一个祖先向所有子孙后代注入一个依赖，无论组件层次有多深，都可以使用

provide选项应该是一个对象或返回一个对象的函数。该对象包含了可注入其子孙的属性。在该对象中你可以使用ES6 Symblos作为key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

inject选项应该是：

• 一个字符串数组，或
• 一个对象，对象的key是本地的绑定名，value是：
  • 在可用的注入内容中搜索用的key（字符串或Symbol），或
  • 一个对象，该对象的：
    • from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
    • default property 是降级情况下使用的 value

注意

provide 和 inject绑定并不是可响应的。如果你传入了一个可监听的对象，那么其对象的属性还是可响应的

具体使用

// 父组件提供 'foo'
let Provider = {
  provide: {
    foo: 'bar'
  }
}

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

还可以这样写，这样写就可以访问父组件中的所有属性：

// 父组件
provide() {
  return {
    app: this
  }
},
data() {
  return {
    n: 1
  }
}

// 子组件
inject: ['app']
console.log(this.app.n)  // 1