vue3/provider 和 inject实现跨组件动态数据传递。

实现跨层传递

在Vue中，provider 和 inject 是一种用于实现依赖注入的高级特性，允许一个祖先组件向其所有子孙组件注入一个依赖，而不论组件层次有多深，并在起上下游关系成立的时间里始终生效。这在某些场景下非常有用，比如当你需要跨多个组件层级传递数据时。

定义provide对象：在父组件中，你需要定义一个对象，这个对象包含你想要提供给子组件的数据或方法。

使用provide选项：在父组件的provide选项中返回这个对象。

在子组件中使用inject：在需要接收数据的子组件中，使用inject选项来接收来自父组件的数据

父组件：使用provide来向下层传递数据

<script setup>
  // 跨层数据传递
  import { provide,ref } from 'vue';
  import contentVue from './content-vue.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>

<style scoped>

</style>

 中间层：被数据跨越的层。

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

最底层：接收数据

<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>

效果图

而且点击按键数组增加，这个跨层传递的数据是动态的。