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项目中如何实现el-table分批渲染表格,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-11-11
这篇文章主要介绍了vue优化之优雅的抛出错误(Error)问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
watch 的本质就是观测一个响应式数据，当数据发生变化时通知并执行相应的回调函数。watch的实现利用了effect 和 options.scheduler 选项，这篇文章主要介绍了Vue3源码分析侦听器watch的实现原理,需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了vue组件父与子通信详解，实现登录窗口，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了vue自适应布局（postcss-px2rem）的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2022-05-05
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
这篇文章主要介绍了vue.js使用v-model实现表单元素(input) 双向数据绑定功能,结合完整实例形式分析了v-model实现表单input元素数据双向绑定相关操作技巧,需要的朋友可以参考下2019-03-03
异步组件是 Vue.js 中提高应用程序性能和加载速度的重要功能之一,在使用异步组件时,需要注意组件的加载时间、错误处理和命名规范等问题,本文将介绍 Vue.js 中异步组件的概念、优势以及如何使用异步组件,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要介绍了Vuex之Action的使用方法详解,Action 类似于 mutation ,不同在于Action 提交的是 mutation,而不是直接变更状态,2023-11-11
Action 可以包含任意异步操作,需要的朋友可以参考下
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
这篇文章主要介绍了vue-video-player,通过自定义按钮组件实现全屏切换效果,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
这篇文章主要介绍了vue计算属性get和set用法,结合实例形式分析了计算属性的功能及get和set用法的具体使用技巧,需要的朋友可以参考下2019-02-02
最新评论