Vue 3中如何结合v-for循环使用Slot？传递循环数据方法

云原生阿岚

2026-7-14

Vue3 子组件v-for结合Slot传递循环数据（表格场景）

原代码的关键问题

子组件插槽绑定变量错误：循环的是delay，但绑定了不存在的delaysBody，应该传递当前循环的单个delay对象
插槽名称不匹配：子组件插槽名是reasonBody，父组件用的是delaysBody，导致插槽无法匹配
表格结构违规：父组件插槽里用<div>包裹<td>，不符合HTML表格规范（<td>必须直接作为<tr>的子元素）
冗余循环：父组件无需再做v-for，子组件已经在循环生成<tr>，每个插槽对应单个数据项

正确实现方案

核心思路：子组件在v-for循环中，将当前迭代的单个数据项绑定到插槽，父组件通过插槽接收该数据项并渲染对应内容。

子组件（示例：TableComponent.vue）

<template>
  <table border="1">
    <tbody>
      <!-- 循环父组件传入的body数组，每个item为单个delay对象 -->
      <tr v-for="delay in body" :key="delay.id">
        <td>{{ delay.id }}</td>
        <!-- 定义具名插槽，绑定当前循环的delay对象（自定义命名为delayItem） -->
        <slot name="reasonBody" :delayItem="delay"></slot>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
// 接收父组件传入的表格数据数组
defineProps(['body'])
</script>

父组件

<template>
  <TableComponent :body="delaysBody">
    <!-- 使用对应具名插槽，接收子组件传递的delayItem -->
    <template v-slot:reasonBody="{ delayItem }">
      <!-- 直接渲染<td>，使用传递过来的单个数据项 -->
      <td>{{ delayItem.reason }}</td>
    </template>
  </TableComponent>
</template>

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

// 模拟表格数据
const delaysBody = [
  { id: '1', reason: '交通拥堵' },
  { id: '2', reason: '设备故障' }
]
</script>