Vue.js 3 SFC多列表渲染问题求助：复用SingleList组件异常

问题根源分析 #

• 第一种场景（<ul>在SingleList内）：你在App.vue里用v-for="item in items"循环渲染SingleList组件，导致每个列表项都生成了一个完整的卡片容器（因为SingleList包含卡片和<ul>），所以每个item单独占一个卡片。
• 第二种场景（<ul>在App.vue内）：你没有给SingleList组件传递单个item的数据，组件内部无法获取渲染所需的内容，所以列表项为空。

正确实现方案 #

方案一：SingleList 作为完整列表容器（包含卡片和<ul>） #

这种方案下，SingleList接收整个items数组，内部负责循环渲染列表项，App.vue只需传递数组即可，避免重复生成卡片。

SingleList.vue

<template>
  <div class="card">
    <h3>{{ title }}</h3>
    <ul>
      <!-- 组件内部循环渲染列表项 -->
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script setup>
defineProps({
  title: String,
  items: Array // 接收整个列表数组
})
</script>

App.vue

<template>
  <!-- 复用SingleList，传递不同的标题和数组 -->
  <SingleList title="项目列表1" :items="list1" />
  <SingleList title="项目列表2" :items="list2" />
</template>

<script setup>
import SingleList from './SingleList.vue'

const list1 = [
  { id: 1, name: '项目A' },
  { id: 2, name: '项目B' }
]
const list2 = [
  { id: 1, name: '项目X' },
  { id: 2, name: '项目Y' }
]
</script>

方案二：SingleList 作为单个列表项组件 #

这种方案下，SingleList只负责渲染单个<li>，App.vue负责卡片、<ul>和循环逻辑。

SingleList.vue

<template>
  <!-- 只渲染单个列表项 -->
  <li>{{ item.name }}</li>
</template>

<script setup>
defineProps({
  item: Object // 接收单个列表项数据
})
</script>

App.vue

<template>
  <div class="card">
    <h3>项目列表1</h3>
    <ul>
      <!-- 循环渲染SingleList，传递每个item -->
      <SingleList v-for="item in list1" :key="item.id" :item="item" />
    </ul>
  </div>
  <div class="card">
    <h3>项目列表2</h3>
    <ul>
      <SingleList v-for="item in list2" :key="item.id" :item="item" />
    </ul>
  </div>
</template>

<script setup>
import SingleList from './SingleList.vue'

const list1 = [
  { id: 1, name: '项目A' },
  { id: 2, name: '项目B' }
]
const list2 = [
  { id: 1, name: '项目X' },
  { id: 2, name: '项目Y' }
]
</script>

核心逻辑总结 #

• 当组件是完整列表容器时，接收整个数组，内部做循环，外部直接复用组件传递数组。
• 当组件是单个列表项时，接收单个数据项，外部负责循环和容器（卡片、<ul>）的渲染。

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