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