vue3 provide和inject底层组件的值不是响应式的处理详解
更新时间：2023年08月22日 14:26:16 作者：芹丸子
这篇文章主要为大家介绍了vue3 provide和inject底层组件的值不是响应式的处理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
前景提示
在学习provide和inject是发现一个问题就是顶层组件使用功provide传递的值在基层组件中使用inject接收后不是响应式的,如下代码所示
//顶层组件代码
const count = ref(100);
provide('count-key',count);
const setCount = ()=>{
count.value = 99;
}
<template>
<div>{{count}}</div>//99
</template>
//底层组件
const count = inject('count-key');
const setCount = inject('set-count);
onMounted(()=>{
setCount();
})
/*子组件的onMounted执行完成之后父组件的onMounted函数才执行完成,所以在子组件中显示的100,但是父组件中显示时已经修改了count的值,所以父组件中显示的99,子组件中显示的100*/
<template>
<div>{{count}}</div>//100
</template>解决方法
//顶层组件代码
const count = ref(100);
provide('count-key',count);
const setCount = ()=>{
count.value = 99;
return {
countNum:count.value
}
}
provide('set-count',setcount)
<template>
<div>{{count}}</div>//99
</template>
//底层组件
const count = inject('count-key');
const setCount = inject('set-count');
const countNum = setCount().countNum
<template>
<div>{{count}}--{{countNum}}</div>//100--99
</template>
在子组件中使用的count的值还是和上面一段代码的解释一样,但是父组件的count和子组件的countNum的值都是重新包装之后才显示所以是响应式改变的这里感谢 Jyann博主的文章给予的帮助,在这里贴上链接,里面的内容更加的全面,大家有相关问题可以查阅https://www.jb51.net/javascript/2959180fb.htm
以上就是vue3 provide和inject底层组件的值不是响应式的处理详解的详细内容，更多关于vue3 provide inject组件值的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue单页面实现当前页面刷新或跳转时提示保存，在当前页面刷新或跳转时提示保存并可取消刷新，以防止填写的表单内容丢失，感兴趣的小伙伴们可以参考一下2018-11-11
options是new Vue的参数,我们一般称之为选项或者构造选项,下面这篇文章主要给大家介绍了关于Vue中options选项的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vue iview实现动态路由和权限验证功能，动态路由控制分为两种：一种是将所有路由数据存储在本地文件中，另一种则是本地只存储基本路由，具体内容详情大家参考下此文2018-04-04
这篇文章主要介绍了vue 扩展现有组件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
在uniapp中进行宽屏开发,主要是指在电脑端(PC端)使用宽屏显示效果进行应用的开发,这篇文章主要给大家介绍了关于uniapp宽屏开发PC端方案及衍生问题解决办法,需要的朋友可以参考下2024-03-03
vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于vue路由传参方式的方式总结及获取参数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了vue一直自动换行的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
详解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南
这篇文章主要介绍了详解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了详解vue项目接入微信JSSDK的坑,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
computed又被称作计算属性，用于动态的根据某个值或某些值的变化，来产生对应的变化，computed具有缓存性，当无关值变化时，不会引起computed声明值的变化。产生一个新的变量并挂载到vue实例上去2022-10-10
最新评论