Vue3向子组件传递prop不生效，求排查问题原因

问题根源 #

你在父组件模板中传递prop时手动添加了.value，尽管初始值能正常传递，但Vue3模板对ref类型变量有自动解包规则，手动写.value会导致响应式更新无法被组件正确追踪。

修复步骤 #

1. 修正父组件的prop传递方式
   将父组件中<TheSidebar :sidebar-state="sidebarState.value" />修改为：

<TheSidebar :sidebar-state="sidebarState" />

原因：Vue3模板会自动对ref响应式变量进行解包，直接使用变量名即可绑定其value属性的实时值，无需手动添加.value。

2. 验证子组件的响应式状态
   在子组件模板中添加调试内容，确认prop是否正常更新：

<template>
  <QDrawer
    :model-value="props.sidebarState"
    show-if-above
    side="left"
    bordered
  >
    content
    <!-- 调试用：实时显示prop值 -->
    <div>当前状态：{{ props.sidebarState }}</div>
  </QDrawer>
</template>

额外检查点 #

• 确认TheHeader组件的toggle-sidebar事件确实触发了父组件的onSidebarToggle函数（可在函数内添加console.log(sidebarState.value)验证）。
• 子组件defineProps中sidebarState的类型定义为Boolean，与父组件传递的类型完全匹配。

内容的提问来源于stack exchange，提问作者João