Vue3中如何实现跨层数据传递功能

一、跨层数据传输介绍

在Vue 3中，跨层数据传输（也称为跨层级组件通信）指的是在不直接父子关系的组件之间传递数据或方法。由于Vue的组件化设计，组件之间往往存在层级关系，但在某些情况下，顶层组件可能需要直接向深层嵌套的子组件传递数据，或者深层子组件需要访问顶层组件的数据，而不需要通过中间组件逐层传递。为了实现这种跨层级的通信，Vue 3提供了provide和inject这两个API。

• provide 允许你指定你想要提供给后代组件的数据/方法
• inject 允许后代组件接收这些数据/方法。

案例：建立3层组件，通过provide和inject实现将顶层的数据传送到底层
实现步骤：
（1）首先在底层组件中，需要使用inject来注入顶层组件提供的数据。注意，在inject时，键名必须完全匹配provide时使用的键名。
（2）通过中间层包裹底层组件
（3）在顶层组件中使用provide来提供数据，并且模板部分正确设置了响应式数据和按钮，同时注意key值要与底层保持一致

• 底层

<script setup>
import {inject, provide} from 'vue'
const vueData = inject("data-key")//声明要获取那些数据
const count = inject("count-key")
// const setCount = inject("setCount-key")//底层传数据到顶层
// provide("down","底层数据")
</script>
<template>
    <div>
        当前文件为底层组件
        <div>
            来自顶层组件数据：{{ vueData }}
        </div>
        <div>
            来自顶层组件的响应数据：{{ count }}
        </div>
    </div>
</template>

• 中间层（案例的中间层组件只是简单地包裹了 DOWEN 组件，没有使用 provide 或 inject）

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

        </DOWEN>
    </div>


</template>

• 顶层

<script setup>
import { provide,ref } from 'vue';//大括号可以引入多个工具
import contentVue from './content-vue.vue';//命名自己写的组件
provide("data-key","顶层组件的数据")//在顶层中存数据，key值如果和底层一样的话就可以把数据传给底层
const count = ref(0)//响应式数据创建
provide("count-key",count)//响应式数据传递，注意key值要与底层保持一致
const setCount = ()=>{
  count.value++
}
</script>
<template> 
      顶层组件
     <contentVue></contentVue>//引入中间层
      <button @click="setCount">{{ count }}</button>//
</template>

案例实现结果：如下所示，顶层部分实现了点击按钮实现数值自增，同时将数据传回了底层，“3”为接受到的响应式顶层数据，“顶层组件的数据”为底层接收到的来自顶层的普通数据