vue中的provide / inject使用

理论

这是Vue提供的一组允许祖先组件向其所有子孙后代注入一个依赖的选项，不管组件层次有多深，子孙后端使用inject都能使用到祖先组件provide提供的对象或对象的函数，官方是如下定义的：

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

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

• 一个字符串数组，或
• 一个对象，对象的 key 是本地的绑定名，value 是：
• 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
• 一个对象，该对象的：

1. from 属性是在可用的注入内容中搜索用的 key (字符串或 -- Symbol)
2. default 属性是降级情况下使用的 value

那么重点来了，在项目中我们如何使用这一对选项呢？

实践：

祖先组件：

<template>
    <div>
        我是祖先
    </div>
</template>

<script>
export default {
  name: 'my-parent',
  provide() {
    return {
      getParent: this.parent    // 为子孙后代提供parent
    };
  },
  data() {
    return {
      parent: {
        name: '我是你祖宗'
      }
    };
  }
}
</script>

子孙后代组件：

<template>
    <my-parent>
        我是子孙辈，
        我祖宗的名字：{{ getParent.name  }}
    </my-parent>
</template>

<script>
export default {
  inject: ['getParent'],  // 获取祖先提供的getParent对象
  data() {
    return {};
  }
}
</script>