• 作用是深层次(祖孙)组件之间传递数据用
• 祖先组件用 provide('数据名',数据) 声明数据，下面的子孙组件都可以进行接收使用
• 子孙组件用  inject('数据名(同祖先组件)') 来进行接收

下面是例子(直接做的响应式的)

祖先组件

<template>
  <div class="App">
    <Sun></Sun>
    <button @click="changeMsg">修改传递的数据</button>
  </div>
</template>

<script setup>
import Sun from '@/components/Sun.vue'
import { provide, ref } from 'vue'

let msg = ref('传给子孙组件的数据')
provide('toSun', msg)

const changeMsg = () => {
  msg.value = '修改后的数据'
}
</script>

子孙组件

<template>
  <h4>孙子组件 --- {
   { msg }}</h4>
</template>

<script setup>
import { inject } from 'vue'

let msg = inject('toSun')
</script>

<style></style>