Vue3父子组件通信：修改父组件变量后视图不更新问题排查

核心问题 #

你用普通var声明的login和register不是Vue的响应式变量——即便变量值确实改变了，Vue也不会自动触发模板重新渲染，所以组件切换没效果。另外你的dotoggle函数逻辑有问题：最后强行把login设为false，却没同步把register设为true，就算变量是响应式的，TheRegister也不会显示。

修复后的父组件代码 #

把普通变量改成ref声明的响应式变量，同时简化切换逻辑：

<script setup lang="ts">
import TheLogin from '../components/TheLogin.vue'
import TheRegister from '../components/TheRegister.vue'
// 引入ref创建响应式变量
import { ref } from 'vue'
const login = ref(true);
const register = ref(false);

const dotoggle = () => {
    // 互斥切换登录/注册状态
    login.value = !login.value;
    register.value = !login.value;
}
</script>
<template>
  <main>
    <TheLogin v-if="login" @togglereg="dotoggle" />
    <TheRegister v-else />
  </main>
</template>

关键说明 #

1. 响应式变量：Vue3里必须用ref（基本类型）或reactive（引用类型）声明变量，才能让Vue追踪值的变化并更新模板。修改ref变量时要加.value，模板中可以直接用变量名。
2. 简化条件判断：登录和注册状态是互斥的，用v-if+v-else比两个独立v-if更高效简洁。
3. 修正逻辑冗余：原函数里的login = login ? false : true;之后又强行设login = false是多余操作，直接通过取反实现状态切换即可。

子组件无需修改 #

子组件的$emit逻辑正常，保持现有代码即可。

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