Vue点击按钮后子组件条件渲染失效及报错问题求助

1. 修复响应式追踪问题 #

你当前定义的continents是普通对象，内部属性虽用了ref，但Vue无法对整个对象的属性访问进行完整响应式追踪，这是组件不渲染的核心原因。需将其改为reactive对象：

修改父组件的<script setup>部分：

import { reactive } from 'vue'
import AsiaCountries from '@/components/Asia/AsiaCountries.vue'
import AfricaCountries from '@/components/AfricaCountries.vue'

// 用reactive替代普通对象+ref的组合
const continents = reactive({
    asia: false,
    africa: false,
    europe: false
});

const showList = (listName) => {
    for (const key in continents) {
        // 直接赋值，无需.value
        continents[key] = key === listName;
    }
};

2. 解决非props属性传递报错 #

控制台的报错是因为v-if被当作属性传递给了子组件，若子组件（比如AfricaCountries）的根节点是多根节点/片段，Vue无法自动继承这类属性。

修改父组件的模板部分，将v-if移到子组件的外层包裹元素上：

<div>
  <div v-if="continents.asia">
    <AsiaCountries />
  </div>
  <div v-if="continents.africa">
    <AfricaCountries />
  </div>
</div>

验证效果 #

完成以上修改后：

• 点击按钮时，continents的属性变化会被Vue正确追踪
• v-if会控制外层包裹元素的显示/隐藏，进而渲染对应的子组件
• 控制台的非props属性报错会消失

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