VueJS中v-else组件未渲染致$refs为null的问题求助

问题根源 #

你遇到的createPatient is null错误，本质是Vue的惰性条件渲染机制导致的：v-if/v-else分支中，不满足条件的区块会被直接销毁（从DOM中移除），而非隐藏。当你先点击已有患者触发showArticle = true时，v-else对应的PatientForm会被Vue销毁，此时DOM中根本不存在这个组件，后续点击“添加患者”时自然拿不到对应的$refs。

正确实现方案 #

要让PatientForm始终保持渲染状态，同时正确控制显示/隐藏，应该放弃v-if/v-else的互斥渲染逻辑，改用**v-show控制显示隐藏**，配合状态变量实现数据驱动视图（而非直接操作DOM），完全规避手动操作DOM的不规范写法。

1. 模板部分调整

把原来的v-if/v-else替换为两个独立的v-show绑定，让两个组件始终渲染在DOM中：

<template>
  <!-- 患者存在时展示文章 -->
  <ArticleCmp v-show="showArticle" />
  
  <!-- 创建患者表单：始终渲染，用v-show控制显示状态 -->
  <PatientForm ref="patientForm" v-show="showPatientForm" />

  <!-- 操作按钮 -->
  <button @click="openAddPatientForm">添加患者</button>
  <button @click="selectExistingPatient">选择已有患者</button>
</template>

2. 脚本部分状态管理

定义两个独立的响应式变量，分别控制文章和表单的显示状态，避免互斥逻辑带来的问题：

<script setup>
import { ref } from 'vue'
import ArticleCmp from './ArticleCmp.vue'
import PatientForm from './PatientForm.vue'

// 控制文章组件的显示
const showArticle = ref(false)
// 控制患者表单的显示
const showPatientForm = ref(false)

// 打开添加患者表单：隐藏文章，显示表单
const openAddPatientForm = () => {
  showArticle.value = false
  showPatientForm.value = true
}

// 选择已有患者：显示文章，隐藏表单
const selectExistingPatient = () => {
  showArticle.value = true
  showPatientForm.value = false
}
</script>

3. 为什么这能解决问题

• v-show不会销毁组件，只是通过CSS的display: none隐藏元素，因此PatientForm始终存在于DOM中，$refs可以正常获取到组件实例/元素。
• 用响应式变量控制显示状态，完全符合Vue数据驱动的设计思想，避免了手动操作DOM的风险。

额外说明 #

如果一定要保留类似原逻辑的互斥显示，也可以用一个状态变量配合计算属性实现，但依然推荐用v-show替代v-if来保证组件始终渲染：

<template>
  <ArticleCmp v-show="currentView === 'article'" />
  <PatientForm ref="patientForm" v-show="currentView === 'form'" />
</template>

<script setup>
import { ref } from 'vue'
const currentView = ref('article') // 默认显示文章

const openAddPatientForm = () => currentView.value = 'form'
const selectExistingPatient = () => currentView.value = 'article'
</script>

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