Vue3-provide和inject

作用和场景:顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信

跨层传递普通数据:

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

2.底层组件通过inject函数获取数据

既可以传递普通数据,也可以使用ref传递响应式数据(顶层组件修改数据后可以响应过去)

但是底层组件不能修改顶层组件传递过来的数据,所以我们可以在顶层组件中跨层传递函数,给子孙后代传递可以修改数据的方法

顶层组件

复制代码
<script setup>
    import {provide,ref} from 'vue'
    const count=ref(100)
    provide('changeCount',(newCount)=>{
        count.value=newCount
    })
</script>

底层组件

复制代码
<script setup>
    import {inject} from 'vue'
    const changeCount=inject(changeCount)
    changeCount(1000)//可以放在点击事件上
</script>

这样就可以把父组件里的count改为1000了

相关推荐
工业甲酰苯胺3 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang3 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止3 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms3 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in4 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课6 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登7 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js