vue3-跨层数据传递案例

当多个组件嵌套时就不单单是父子之间的传递了，以下是三层组件的嵌套案例

用到的工具：provide,inject

底层组件案例：

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

说明：变量名=inject("key值")，声明前边的变量用于接收顶层传来的数据，数据的key值为括号的引号中的值。

中间层：

<script setup>

import dowen from './dowen.vue'

</script>
<template>
    <div>
        中间层组件
        <dowen></dowen>
   </div>
</template>

说明：import导入底层组件，template元素中使用引用名做标签，实现引用底层内容

顶层：

<script setup>

//跨层数据传递
import { provide,ref } from 'vue';
import contentVue from './content-vue.vue';
provide("data-key","顶层组件的数据")
const count=ref(0)
provide("count-key",count)

</script>
<template>
  顶层组件
  <contentVue></contentVue>
  <button @click="setCount">{{ count }}</button>
  
</template>

说明：import导入我们跨层传递数据的工具provide，和中间层组件。首先使用工具存了一个常量值到data-key对应的值内：provide("data-key","顶层组件的数据")。然后使用ref定义了一个响应式数据count，再将count使用工具存入count-key对应的值内：provide("data-key","顶层组件的数据")。在元素部分引用了中间层标签。在元素部分还设置了一个按钮，用来对响应式数据count进行操作，因为是响应式数据所以底层接收到的值也会发生改变。

页面效果：

单机一次后：

 响应式数据也可以通过底层操作顶层

顶层案例：

<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++
}
provide("setCount-key",setCount)
</script>
<template>
  顶层组件
  <contentVue></contentVue>
  <button @click="setCount">{{ count }}</button>
 
</template>

说明：只是在原来的基础上在provide工具中存放了setCount函数，key值为setCount-key：provide("setCount-key",setCount)，这样底层就可以通过这个key值获取这个函数了

中间层代码不变

底层代码：

<script setup>
import { inject } from 'vue';
const vueData=inject("data-key")
const count=inject("count-key")
const setCount=inject("setCount-key")
</script>
<template>
    <div>当层文件为底层组件
        <div>
            来自顶层组件的普通数据:{{ vueData }}
        </div>
        <div>
            来自顶层组件的响应数据:{{ count }}
        </div>
       <button @click="setCount">
count值加1
       </button>
    </div>
</template>

说明：只是在原来的基础上多了一个接收setCount函数的代码和触发该函数的按钮，这样就可以实现底层对顶层的响应式数据操作

页面效果：

单机一次底层按钮（count值加1）后：

 自加只是底层对顶层响应式数据的操作的一种，可以通过这种方式达到自己想达到的业务逻辑