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了

相关推荐
阿伟来咯~11 分钟前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端16 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱18 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai28 分钟前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨29 分钟前
在JS中, 0 == [0] 吗
开发语言·javascript
bysking1 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js