provide 和 inject
顶层组件（Grandparent.vue）
<template>
<div>
<parent-component></parent-component>
</div>
</template>
<script setup>
import { provide, ref } from 'vue';
import ParentComponent from './ParentComponent.vue';
// 定义一个响应式数据
const message = ref('Hello from Grandparent!');
// 使用provide提供数据
provide('messageKey', message);
</script> 使用 provide 函数将其提供给所有子孙组件，提供的键为 'messageKey'
中间层组件（ParentComponent.vue）
<template>
<div>
<child-component></child-component>
</div>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>底层组件（ChildComponent.vue）
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script setup>
import { inject } from 'vue';
// 使用inject接收顶层组件提供的数据
const message = inject('messageKey');
</script>使用 inject 函数接收顶层组件通过 'messageKey' 键提供的数据，并使用