Vue组件页面渲染两次，添加条件后出现空元素求助

组件代码 #

HomeView组件 #

<template>
  <TheHero />
  <TheServices />
  <TheBundles />
  <AsideCTA title="Kontakta oss!" url="#">
    <p>
      Osäker på vad du behöver? Don't worry, vi hjälper dig!
    </p>
  </AsideCTA>
  <TheProcess />
  <ThePitch />
  <TheReferences />
  <AsideHook />
</template>

AsideCTA组件 #

<script setup>
import TheCTA from './TheCTA.vue';
const props = defineProps(['title', 'url']);
</script>

<template>
  <aside class="aside-cta">
    <slot></slot>
    <TheCTA v-if="props.title" :url="props.url">{{ props.title }}</TheCTA>
  </aside>
</template>

TheCTA组件 #

<script setup>
const props = defineProps(['url']);
</script>

<template>
  <a :href="props.url" class="cta"><slot></slot></a>
</template>

问题描述 #

• 无条件渲染时，AsideCTA组件会在页面中渲染两次
• 给AsideCTA添加条件渲染（绑定asideCTATitle为null）后，页面上仍会出现一个空元素

解决思路与排查步骤 #

1. 排查重复渲染来源

   • 打开Vue开发者工具，查看HomeView的组件树，确认是否存在两个AsideCTA实例。如果有，检查以下场景：
     • 是否在全局（如main.js）和局部（HomeView）重复注册/引入了AsideCTA组件
     • 布局组件（如App.vue、自定义Layout）中是否也渲染了AsideCTA
     • 路由配置是否重复加载了HomeView页面

2. 清理模板空白节点
   页面上的空元素很可能是模板中的空格、换行被Vue解析成了空文本节点。可以尝试：

   • 压缩AsideCTA模板中的空白：

     <template>
       <aside class="aside-cta"><slot></slot><TheCTA v-if="props.title" :url="props.url">{{ props.title }}</TheCTA></aside>
     </template>
     

   • 若使用Vue3，可在父组件中给AsideCTA添加v-pre指令（仅当不需要解析组件内部指令时），或者在项目配置中开启模板空白压缩。

3. 检查条件渲染逻辑
   确认asideCTATitle的赋值逻辑是否正确，是否存在异步赋值导致初始渲染空元素的情况。可以尝试将初始值设为undefined而非null，或者调整条件判断逻辑。

4. 检查Elements面板
   在浏览器Elements面板中查看空元素的具体类型：

   • 如果是<aside class="aside-cta">空标签，说明AsideCTA本身被渲染了但内容为空，需检查props.title的传递是否正确
   • 如果是文本节点或注释节点，基本可以确定是模板空白导致的

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