Vue组件跨层级通信

• 正常组件间通信
  • 父->子组件 是通过属性传递
  • 子->父组件 是通过this.$emit()传递
    • this.$emit()返回的是this,如果需要一些值 可使用callback方式传递

provide 和 inject

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，
不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
provide 和 inject 绑定并不是可响应的。这是刻意为之的。
然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

• provide提供数据,多层子组件 向上层寻找,只要找到 就不在向上层寻找了.
• inject 向子组件注入数据

使用方式

• 第一种方式(传递对象,使用字符串数组接收)

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

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

• 第二种方式(传递返回对象的函数, 使用对象接收)

provide() {
  return {
    // 2.6.0 版本之前 通常传递this. 但这样的话 会传递很多用不到的属性
    theme: {
      color: 'xxx' //如果传入可响应的数据,这里的属性还是可响应的
    }
  };
}
inject: {
  //这里可以换成其它名字
  theme: {
    from: "theme", // 数据来源
    default: () => ({}) //降级情况下使用的 value
    //可以是 普通值
    //可以是 对非原始值使用一个工厂方法
  }
}
//正常子组件
this.theme //即可访问
//子组件是函数式组件的使用方式
injections.theme.color

Vue.observable( object )

让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。
可以作为最小化的跨组件状态存储器，用于简单的场景

提供数据可改为

provide() {
  //这时提供的theme 则为可响应的数据
  this.theme = Vue.observable({
    color: "blue"
  });
  return {
    theme: this.theme
  };
},