该文章讲的是关于跨级组件通信方式，使用的 API 是 provide 和 inject。
provide 用于提供数据，那么应该在祖先组件中使用；inject 用于接收数据注入到自己的组件中，那么应该在孙子组件中使用。
使用上述 API 需要先从 vue 中导入：
import { provide } from 'vue'
import { inject } from 'vue'
provide 是一个方法，接收两个参数，key 和 value，key 表示要提供数据的键名，value 表示要提供的数据。
const name = 'zhangsan'
provide('name', name)
inject 是一个方法，接收参数为 provide 提供数据的 key，也就是键名。它的返回值就是接收到的数据，直接使用即可。在孙子组件中也可以修改 provide 提供的值。
// name 为接收到的数据，也就是 provide 提供的 name = 'zhangsan'
let name = inject('name')
注意：因为 provide 和 inject 指向同一个对象，所以当孙子组件中修改祖先组件传过来的值时，祖先组件的相应数据也会跟着变化。
name.value = 'lisi'
// provide -> name: 'lisi' & inject -> name: 'lisi'
完整示例：
Parent.vue
<template>
<div>我是父组件</div>
<pre>我要实现跨级(隔辈)组件通信，爷爷组件传递数据给孙子组件：{{ count }}</pre>
<hr />
<Child></Child>
</template>
<script setup>
// 我是提供者 --- provide
import { provide, ref } from "vue";
import Child from "./Child.vue";
const count = ref(0);
// provide() 是一个方法，接收两个参数：key[提供数据的 key],value[要提供的数据]
provide('count', count)
</script>
Child.vue
<template>
<div>我是子组件</div>
<hr />
<GrandChild></GrandChild>
</template>
<script setup>
import GrandChild from "./GrandChild.vue";
</script>
GrandChild.vue
<template>
<div>我是孙子组件</div>
<pre>这是我接收的爷爷组件提供的数据：{{ count }}</pre>
<button @click="handler">更新provide提供的数据</button>
</template>
<script setup>
// 我是消费者，需要注入数据到我这里 --- inject
import { inject } from "vue";
// inject() 是一个方法，接收参数：key[provide 组件提供数据的 key]
// 函数执行返回提供的数据
let count = inject('count')
// console.log(count);
// 可以更改 provide 提供的数据，因为祖先组件和孙子组件数据指向同一个对象，所以在孙子组件中修改，祖先组件的数据也会修改，这就实现了孙子传递数据给组件组件。
const handler = () => {
count.value = 1
}
</script>
总结：
provide('key', value)inject('key')let res = inject('key')resres.value
