除了用props与子组件通信还可以用vue2.2新增的provide与inject来传值

官方介绍

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，

不论组件层次有多深，并在起上下游关系成立的时间里始终生效。如果你熟悉 React，这与 React 的上下文特性很相似。

看不懂上面的介绍没有关系，不过上面的这句提示应该明白，就是说 Vue.js 不建议在业务中使用这对 API，

而是在插件 / 组件库（比如 iView，事实上 iView 的很多组件都在用）。不过建议归建议，如果你用好了，这个 API 会非常有用。

我们先来看一下这个 API 怎么用，假设有两个组件： A.vue 和 B.vue，B 是 A 的子组件。

// A.vue
export default {
  provide: {
    name: 'Aresn'
  }
}

// B.vue
export default {
  inject: ['name'],
  mounted () {
    console.log(this.name);  // Aresn
  }
}

可以看到，在 A.vue 里，我们设置了一个 provide: name，值为 Aresn，

它的作用就是将 name 这个变量提供给它的所有子组件。而在 B.vue 中，

通过 inject 注入了从 A 组件中提供的 name 变量，那么在组件 B 中，

就可以直接通过 this.name 访问这个变量了，它的值也是 Aresn。这就是 provide / inject API 最核心的用法。

需要注意的是：

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

所以，上面 A.vue 的 name 如果改变了，B.vue 的 this.name 是不会改变的，仍然是 Aresn。