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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue + element-plus自定义表单验证(修改密码业务)的示例
这篇文章主要介绍了vue + element-plus自定义表单验证(修改密码业务),本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2025-04-04
这篇文章主要介绍了基于vue实现的圆形菜单栏组件，本文通过实例代码，图文详解的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了vue子组件使用自定义事件向父组件传递数据的方法，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了vue打包更新packge.json版本号的全过程,文章通过图文结合的方式给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了ant-design-vue动态表格合并案例，文章围绕主题通过案例详解展开相关内容，具有一定的参考价值，需要的小伙伴可以参考一下2022-08-08
Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Electron集成React和Vue的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
本文介绍了如何安装Nginx并部署Vue项目,首先从官网下载Nginx并启动服务,然后使用Vite构建Vue项目,将构建好的dist文件夹部署到Nginx目录下,并修改nginx.conf文件以防止刷新页面时出现404错误,最后,总结了刷新页面空白问题的解决方法2026-01-01
这篇文章主要介绍了前端-Vue2使用脚手架的相关资料,VueCLI是Vue命令行工具,用于快速搭建、配置Vue项目,集成构建、插件、开发服务器等功能,需要的朋友可以参考下2025-06-06
这篇文章主要为大家介绍了vue中destroyed方法及使用示例讲解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了vue中循环请求接口参数问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论