关于前端: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