Vue中父组件使用provide传值时如何获取自身provide的数据

在Vue中，provide 可用于向所有后代组件跨层级传递值，基础用法如下：

provide('data',ref("I am data for child components"))

后代子组件可以使用inject直接获取该传递的值。

针对「声明provide的父组件本身如何获取自身provide中的数据」的问题，最简洁可靠的实现方式是提前将需要provide的值抽成独立的变量引用，组件自身直接使用该变量即可，不需要尝试通过inject自引用。

示例代码：

// 1. 先单独定义要传递的状态，保持引用独立
const sharedData = ref("I am data for child components")
// 2. 把定义好的变量传入provide
provide('data', sharedData)

// 3. 组件自身直接访问这个变量即可，和后代组件inject拿到的是同一个引用，值完全同步
console.log(sharedData.value) // 直接输出对应内容，修改也会同步给所有inject的子组件

注意：不要尝试在父组件中通过inject('data')的方式获取自身提供的值。Vue的inject依赖查找逻辑是顺着组件树向上遍历父级组件的provide注册表，当前组件自身provide的内容不会进入自身的查找链路，这么写只会拿到更上层组件同名key提供的值，很容易引发意料之外的bug。

如果使用选项式API写法，逻辑完全一致：把要provide的值挂载到组件自身的data、computed等实例属性上，provide时指向该属性，组件内部直接通过this访问对应实例属性即可。

内容的提问来源于stack exchange，提问作者Zego Tech