vue组件在第2页上呈现两次

Question

在我的主页组件中，我正在导入Asidecta组件：

<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组件中，我正在导入tecta组件：

<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>

问题是该组件与另一个空的迭代一起呈现，我不知道为什么。我试图使组件有条件，但它仍然在页面上使用一个空的v-if-f-if

before.

没有条件：

该组件在页面上呈现两次 条件：

<template>
  <AsideCTA v-if="asideCTATitle" :title="asideCTATitle" url="#">
    <p>
      Osäker på vad du behöver? Don't worry, vi hjälper dig!
    </p>
  </AsideCTA>
</template>

<script setup>
[...]

import { ref } from 'vue';

const asideCTATitle = ref(null);
</script>

renders一个空元素

有人知道这是怎么回事？

问题可以在Vue DevTools中可见，渲染的组件包含：

HomeView

这意味着它不仅是问题所显示的DOM中的一个错误，而且是

<AsideCTA ...>...</AsideCTA>
<AsideCTA/>

的实际行为。如果模板中只有一个

Answer 1

，则在正常情况下，这是不可能的。

问题是由错字引起的：

AsideCTA

这将导致第二次渲染而不是

import AsideCTA from '../components/AsideCTA.vue';
...
import TheProcess from '../components/AsideCTA.vue';

。