vue出现无限递归是怎么回事？

Question

写了两个组件
Card.vue

<script setup lang="ts">
interface Props {
  caption?: string
}

defineProps<Props>()
</script>

<template>
  <div class="card">
    <div class="card-header" v-if="caption">
      <span class="card-caption">{{ caption }}</span>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
  </div>
</template>

Input.vue

<script setup lang="ts">

</script>

<template>
  <input type="text" />
</template>

把Input放到Card里出现了无限递归

Answer 1

找到原因了vue无法分辨大小写组件是两个组件。使用unplugin-vue-components自动导入Card组件；使用vite-plugin-pages自动生成路由，而我用来显示Card组件的页面命名为card.vue，不知道是vue不区分大小写还是vite不区分大小写。也不知道这种问题在react上有没有

Answer 2

上面的内容不好判断，把这两个组件的定义和调用处进行完整的截图，然后发出来看看。