引入ReceiptListItem组件后Vue页面空白，求问题原因

问题现象 #

在ReceiptList.vue中保留ReceiptListItem组件的引入和使用时，页面直接变成空白；但把该组件的引入和模板中的调用注释掉后，页面能正常显示Hello。

代码示例 #

ReceiptList.vue #

<template>
Hello
<div class="list-container">  
        <ul>
            <ReceiptListItem/>
        </ul>
</div>
</template>

<script setup>
import { ReceiptListItem } from '@/components/ReceiptListItem.vue' 
</script>

ReceiptListItem.vue #

<template> 
<li>
    <div class="two-rows">
        <div class="line-spread">
            <span class="id">1212121</span>
        </div>
        <div class="line-spread">
            <span>1</span>
        </div>
    </div>
</li>
</template>
    
<script setup>
</script>

原因分析 #

1. 核心问题：组件导入语法错误
   Vue 3单文件组件的默认导出是组件本身，不是一个包含组件的对象。你在<script setup>里用了解构导入{ ReceiptListItem }，相当于从模块导出的内容里去拿名为ReceiptListItem的属性，但实际上根本没有这个属性，最终导入的是undefined。当模板里使用一个不存在的组件时，Vue会渲染失败，导致整个页面空白。

2. 次要问题：多根节点模板（Vue 3虽支持，但需注意）
   你的ReceiptList.vue模板里直接写了Hello和<div class="list-container">两个同级根节点，虽然Vue 3支持多根节点模板，但某些场景下可能引发渲染异常，不过这里导致页面空白的主要原因还是导入错误。

解决办法 #

1. 修正组件导入语句
   把ReceiptList.vue中的导入代码改成直接导入，去掉解构：

<script setup>
import ReceiptListItem from '@/components/ReceiptListItem.vue' 
</script>

2. 可选：统一模板根节点
   为了避免潜在的多根节点问题，可以把模板内容包裹在一个根元素里：

<template>
  <div class="receipt-list-wrapper">
    Hello
    <div class="list-container">  
      <ul>
        <ReceiptListItem/>
      </ul>
    </div>
  </div>
</template>

内容的提问来源于stack exchange，提问作者I.P.