Vue3 关于 provide、inject 的用法

前言： 在前端项目中牵扯的最多的莫过于组件之间的传值了，除了最最常用的 props 和 emit，其实在 Vue 中还额外提供了另外几种方法。今天分享一种组件之间通信的方法。

一. 场景再现

1. 先别着急考虑标题这个 api 的含义。在这里我先动手写一个比较常见的场景。
   所对应的组件内部代码比较简单，这里我就不展示了，逻辑上就是 这三个组件层层引用。
   
   所对应的页面效果如下：
   

2. 如上图，这是一个在项目中很常见的一个场景，三层嵌套的组件。(其实还有深层次的嵌套，目前我们拿三层嵌套举例足矣)

3. ok，你现在的需求是：在爷爷组件内需要提供一个字符串数据 “韩振方” 去提供给 儿子组件使用。

4. 聪明的你肯定想到了 props，废话不多说，我们直接上手。

二. 传递 Props

1. “我以为多高深呢，这不就是数据父传子的场景吗？我直接传递 props 去完成这个需求。”

2. 于是我会在 GrandFather.vue写下这样一段代码
   

3. 接下来就该去 Father.vue 组件去接收这个数据了。于是我们在 Father.vue 组件定义了 props 去接收这个值。
   
   我们看一眼页面
   
   没什么问题，爸爸组件已经收到了。但是别忘了我们任务还没完成呢，我们的需求是给儿子组件使用，

4. 于是我们又赶紧接着往下传递。
   

5. 所以现在我们的 Children.vue 组件的样子就变成这个样子。
   
   页面效果如下:
   
   最终我们的 儿子组件 也确实拿到了。

6. 写到这里你发现了一些不太对劲的地方吗？