vue3 provide和inject底层组件的值不是响应式的处理详解
作者：芹丸子
这篇文章主要为大家介绍了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组件值的资料请关注脚本之家其它相关文章！