VUE3组合API中跨层数据传递 provide和inject

1.provide 顶层组件通过该函数提供数据

2.inject 底层组件通过该函数获得数据、

        示例：

                目的：数据从底层传到顶层

底层：创建一个底层 dowen.vue文件

<script setup>
import {inject} from 'vue';
const vueData = inject('data-key')
const count = inject('count-key')
</script>
<template>
  <div>
    当前文件为底层组件
    <div>
      来至顶层组件的普通数据：{{ vueData }}
    </div>
    <div>
      来至顶层组件的相应数据：{{ count }}
    </div>
  </div>
</template>

中层：创建一个中层content.vue文件

<script setup>
import DOWEN from './dowen.vue'
</script>
<template>
  <div>
      中间层组件
      <DOWEN></DOWEN>
  </div>
</template>

顶层：在App.vue中实现数据的跨层传递

<script setup>
import { provide,ref } from 'vue';
import contentVue from './content.vue';
provide("data-key","顶层组件的数据")
const count = ref(0)
provide("count-key",count)
const setCount = ()=>{
  count.value++
}
</script>
<template>
  顶层组件
  <contentVue></contentVue>
  <button @click="setCount">{{ count }}</button>
</template>

效果：

这种方式特别适用于需要将数据从祖先组件传递到多层嵌套的后代组件时，避免了所谓的 "prop drilling"（逐级传递 props）的问题。