Vue3中provide和inject作用和场景
更新时间：2023年11月24日 11:31:34 作者：小沐°
Vue3中provide和inject作用和场景是顶层组件向任意的底层组件传递数据和方法,实现跨层组件通信,本文通过实例介绍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了
到此这篇关于Vue3中provide和inject作用和场景的文章就介绍到这了,更多相关Vue3 provide和inject内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue3 使用defineExpose的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了Vue路由传参props解耦的三种方式小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了详解vue-router数据加载与缓存使用总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了Vue中的slots/scoped slots,本文实例代码相结合的形式给大家介绍了slots的工作原理，需要的朋友可以参考下2018-04-04
这篇文章主要介绍了Vue 2.0学习笔记之使用$refs访问Vue中的DOM，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要为大家介绍了如何通过URL来实现在Vue中存储业务状态实用技巧，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-10-10
本文主要介绍了element关于table拖拽排序问题，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
v-model通常用于input的双向数据绑定,它并不会向子组件传递数据,下面这篇文章主要给大家介绍了关于vue2和vue3组件v-model区别的相关资料,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了proxy实现vue3数据双向绑定原理,文章以介绍proxy的优点开始展开全文内容，围绕proxy实现vue3数据双向绑定的相关资料，,需要的朋友可以参考一下2021-12-12
Vue中ElementUI结合transform使用时弹框定位不准确问题解析
在近期开发中,需要将1920*1080放到更大像素大屏上演示,所以需要使用到transform来对页面进行缩放,但是此时发现弹框定位出错问题,无法准备定位到实际位置,本文给大家分享Vue中ElementUI结合transform使用时弹框定位不准确解决方法,感兴趣的朋友一起看看吧2024-01-01
最新评论