vue3 跨级传递数据

假设我们我们有3层组件 顶层，中间层，底层

如果我们的顶层想给底层传递数据
通例的我们可以用父传子的方式props，顶层传递给中间层，中间层再传给底层，如果中间有很多层，那不炸杠了吗
所以接下来要用vue3推出的provide和inject函数
我们在顶层用provide函数

1. <script setup>
2. import CenterApp from '@/components/center-app.vue';
3. import {provide} from 'vue'
4. import {ref} from 'vue'
6. const count=ref(0)
7. provide('car','宝马')
8. provide('count',count)
9. provide('addcount',()=>{
10.   count.value++;
11. })
12. </script>
14. <template>
15.     <div>
16.         <h1>我是顶部组件</h1>
17.         <CenterApp></CenterApp>
18.     </div>
19. </template>

复制代码

底层用inject函数来吸取，可以吸取常量，相应式变量，函数

1. <script setup>
2. import {inject} from 'vue'
3. const car=inject('car')
4. const count=inject('count')
5. const addcount=inject('addcount')
6. </script>
8. <template>
9.     <div>
10.         <h3 >我是底部组件-----{{car}}-----{{count}}辆</h3>
11.         <button @click='addcount'>增加</button>
12.     </div>
13. </template>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。