关于前端: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博主的文章给予的帮忙,在这里贴上链接,外面的内容更加的全面,大家有相干问题能够查阅
http://t.csdn.cn/yeKls