1.1 provide
provide 函数用于在祖先组件中定义一个值，使得其所有后代组件都可以使用 inject 来访问这个值。
用法：
provide(key, value)
-
key：一个字符串或 Symbol，用于唯一标识所提供的值。 -
value：所提供的值，可以是任何类型。
1.2 inject
inject 函数用于在后代组件中访问祖先组件通过 provide 所提供的值。
用法：
const value = inject(key, defaultValue)
-
key：与provide相同的字符串或 Symbol。 -
defaultValue：一个可选的默认值，当provide没有提供该key对应的值时，inject将返回这个默认值。
例
假设我们有一个祖先组件 GrandParent，一个中间组件 Parent，以及一个后代组件 Child。我们希望从 GrandParent 传递一个数据到 Child。
GrandParent.vue
<template>
<Parent />
</template>
<script setup>
import { provide } from 'vue';
import Parent from './Parent.vue';
const theme = 'dark';
provide('theme', theme);
</script>
Parent.vue
<template>
<Child />
</template>
<script setup>
import Child from './Child.vue';
</script>
Child.vue
<template>
<div :class="theme">
I am a child component with {{ theme }} theme.
</div>
</template>
<script setup>
import { inject } from 'vue';
const theme = inject('theme', 'light'); // 'light' 是默认值，如果 provide 没有提供 'theme'
</script>
<style scoped>
.dark {
background-color: black;
color: white;
}
.light {
background-color: white;
color: black;
}
</style>