Vue3中的provide、inject 的用法

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

一. 场景再现

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

所对应的页面效果如下：

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

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

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

二. 传递 Props

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

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

接下来就该去 Father.vue 组件去接收这个数据了。于是我们在 Father.vue 组件定义了 props 去接收这个值。

我们看一眼页面

没什么问题，爸爸组件已经收到了。但是别忘了我们任务还没完成呢，我们的需求是给儿子组件使用，

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

所以现在我们的 Children.vue 组件的样子就变成这个样子。

页面效果如下:

最终我们的 儿子组件 也确实拿到了。

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