Vue3中provide/inject传递布尔类型Ref值页面不生效问题

问题出在子组件修改值的方式上：inject 拿到的是父组件传递的ref响应式对象，但你直接用 testboolean = !testboolean 把这个变量替换成了普通布尔值，直接断开了和原ref响应式的绑定，所以页面无法感知到变化。

修正后的子组件代码 #

<script setup lang="ts">
import { inject, ref } from 'vue';
// 注意：默认值也要用ref包裹，保证始终是响应式对象
const testboolean = inject('test', ref(false));

function toggleControlbox(){
  // 必须修改ref的value属性，才能保留响应式
  testboolean.value = !testboolean.value;
}
</script>
<template>
  <div @click.stop.prevent="toggleControlbox()">{{ testboolean }}</div>
</template>

补充说明 #

1. 父组件的写法可以简化（非必须，但更符合Vue3规范）：
   不需要在mounted钩子中创建ref，直接在<script setup>顶层声明即可：

   <script setup lang="ts">
   import { ref, provide } from 'vue';
   const testboolean = ref<boolean>(true);
   provide('test', testboolean);
   </script>
   

2. 为什么要修改value：ref是一个包裹响应式值的对象，Vue的响应式系统是基于这个对象的引用追踪的。如果直接替换整个变量，就相当于丢弃了响应式载体，自然无法触发页面更新。

内容的提问来源于stack exchange，提问作者nolest7