vue 提供/注入 （provide/ inject）

1. 说明：vue提供了这种注入的方式极大的方便了数据的集中管理，使开发者轻松处理多层级组件传参问题。参考文档（https://vuejs.org/guide/components/provide-inject.html）

2. 背景：通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦：

注意，虽然这里的 <Footer> 组件可能根本不关心这些 props，但为了使 <DeepChild> 能访问到它们，仍然需要定义并向下传递。如果组件链路非常长，可能会影响到更多这条路上的组件。这一问题被称为“prop 逐级透传”，显然是我们希望尽量避免的情况。

provide 和 inject 可以帮助我们解决这一问题。 一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

3. 使用：

export default {
  data() {
    return {
      message: 'hello!'
    }
  },
  provide() {
    return {
      message: this.message
    }
  }
}

//注入
export default {
  inject: ['message'],
  created() {
    console.log(this.message) // injected value
  }
}
//或
export default {
  inject: ['message'],
  data() {
    return {
      fullMessage: this.message
    }
  }
}