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' 键提供的数据，并使用