1.使用 <script setup> 引入并注册 test 和 demo 两个组件。
2.在模板中分别用 v-show="active === 'test'" 和 v-show="active === 'demo'" 控制显示，并给每个组件添加 ref（如 ref="test"、ref="demo"）。
3.点击按钮切换 active的值（test↔ demo）。
4.观察组件显示情况。
999
- 发布：2026-03-20 14:08
- 更新：2026-03-20 14:08
- 阅读：64
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 26.3.1
HBuilderX类型： 正式
HBuilderX版本号： 5.04
手机系统： iOS
手机系统版本号： iOS 26
手机厂商： 苹果
手机机型： 14 plus
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
点击按钮后，active 对应的组件应正常显示，另一个组件隐藏，且 ref 能正常获取组件实例。
点击按钮后，active 对应的组件应正常显示，另一个组件隐藏，且 ref 能正常获取组件实例。
实际结果：
只要组件带有 ref，无论 active 为何值，两个组件均不显示（只有首次会显示），页面无对应组件内容；去掉 ref 后功能正常。
只要组件带有 ref，无论 active 为何值，两个组件均不显示（只有首次会显示），页面无对应组件内容；去掉 ref 后功能正常。
bug描述：
在 Vue 3 项目中使用 <script setup> 组合式写法时，通过 v-show 控制两个子组件的显隐。当给子组件添加 ref 属性后，切换 active 值会导致两个组件同时消失，无法正常显示目标组件。若移除 ref 或使用选项式写法，则切换功能恢复正常。
实际测试：微信小程序功能正常、H5 和 App 不正常。
Ask小助手 - Ask社区AI助手
欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。
作为DCloud官方人员，我对该bug反馈进行如下评审：
一、反馈内容完整性评估
该反馈在环境信息描述上较为完整，提供了HBuilderX版本（5.04）、Vue版本（Vue3）、运行平台（iOS 14 Plus）等关键信息。但存在以下不足：
-
缺少可复现代码示例：反馈中仅通过文字描述了问题，未提供最小化的可运行代码片段。官方人员无法直接复制运行来验证问题，需要用户补充具体的.vue文件代码。
-
复现步骤缺少关键细节：虽然描述了操作步骤，但未说明test和demo组件的具体定义方式（是局部注册还是全局注册）、是否在
<script setup>中声明了与ref同名的变量等关键信息。 -
缺少项目配置信息：未说明manifest.json中Vue3的具体配置方式，以及是否使用了TypeScript等。
二、Bug有效性分析
根据知识库检索结果，该问题大概率不是系统Bug，而是使用限制导致的冲突。
在知识库ad-dev-faq中明确记载（详情）：
"vue3组合式写法，注意：页面名称不能和组件重名，ref名称不能和组件重名"
结合您的描述：
- 您提到"给每个组件添加ref（如ref="test"、ref="demo"）"
- 同时组件名为test和demo
这正好触发了上述限制：在Vue3 <script setup>组合式API中，如果ref名称与组件变量名相同，会导致响应式引用冲突，进而造成组件渲染异常。
三、解决方案
请将ref属性修改为与组件名不同的标识：
<template>
<!-- 错误写法：ref与组件名重名 -->
<!-- <test ref="test" v-show="active === 'test'" /> -->
<!-- 正确写法：ref使用不同名称 -->
<test ref="testRef" v-show="active === 'test'" />
<demo ref="demoRef" v-show="active === 'demo'" />
</template>
<script setup>
import { ref } from 'vue'
import test from './test.vue'
import demo from './demo.vue'
const active = ref('test')
// ref名称与组件名区分开
const testRef = ref(null)
const demoRef = ref(null)
</script>四、建议
- 建议补充完整的代码示例，确认是否确实为命名冲突问题
- 如修改ref名称后问题依旧，请提供可复现的demo项目
- 关注官方文档中关于Vue3组合式API的使用限制说明
该反馈建议归类为"使用咨询"而非"系统Bug"，如验证后确非命名冲突导致，请补充代码示例后重新提交。
内容为 AI 生成，仅供参考
