Vue3 Table组件作用域插槽绑定求助：插槽失效及数据丢失

核心问题分析 #

1. TheColumn组件未正确传递插槽：当前仅返回空数组，未将自身的#header、#cell插槽暴露给父组件TheTable。
2. TheTable插槽获取逻辑错误：错误从slot.props中提取插槽对象，实际插槽属于TheColumn的作用域插槽，需从组件的插槽集合中获取。
3. TheTable模板插槽复用错误：使用自身<slot>标签无法区分不同列的独立插槽，需针对每个列的插槽单独渲染。

分步解决方案 #

1. 重构TheColumn组件 #

TheColumn作为抽象组件，无需渲染DOM，仅需接收列配置props并暴露自身插槽，供父组件提取：

<!-- TheColumn.vue -->
<script setup>
import { defineProps } from 'vue'

// 定义列支持的配置参数
defineProps({
  label: {
    type: String,
    required: true
  },
  prop: {
    type: String,
    default: ''
  }
})
</script>

<template>
  <!-- 抽象组件无DOM输出 -->
</template>

2. 修改TheTable的columns计算属性 #

正确提取每个TheColumn的配置和对应插槽：

<!-- TheTable.vue -->
<script>
export default {
  name: 'TheTable',
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  computed: {
    columns() {
      // 过滤出所有TheColumn类型的子组件VNode
      return (this.$slots.default?.() || []).filter(vnode => vnode.type.name === 'TheColumn').map(vnode => {
        const columnProps = vnode.props || {}
        // 获取该列的插槽集合（header和cell）
        const columnSlots = vnode.component?.slots || {}
        return {
          label: columnProps.label,
          prop: columnProps.prop,
          // 保存插槽的渲染函数
          headerSlot: columnSlots.header,
          cellSlot: columnSlots.cell
        }
      })
    }
  }
}
</script>

3. 修改TheTable模板，动态渲染列插槽 #

使用Vue的动态组件特性，渲染每个列的独立插槽，并传递作用域参数：

<!-- TheTable.vue -->
<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="column in columns" :key="column.prop || column.label">
            <!-- 优先渲染header插槽，无插槽则显示label -->
            <component v-if="column.headerSlot" :is="column.headerSlot" />
            <span v-else>{{ column.label }}</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in data" :key="index">
          <td v-for="column in columns" :key="column.prop || column.label">
            <!-- 优先渲染cell插槽，无插槽则显示prop对应字段值 -->
            <component v-if="column.cellSlot" :is="column.cellSlot" :item="row" />
            <span v-else>{{ row[column.prop] }}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

4. 验证App.vue功能 #

App.vue代码无需修改，切换translate值即可测试插槽和列配置的动态效果。

关键知识点说明 #

• 抽象组件：TheColumn仅负责传递列配置和插槽，不生成DOM节点，是自定义表格组件的标准列定义方式。
• 插槽本质：Vue3中插槽是渲染函数，通过vnode.component.slots可获取子组件的插槽集合，用<component :is="插槽对象">可动态渲染插槽并传递作用域参数。
• 列元数据收集：遍历父组件默认插槽，筛选指定类型的子组件VNode，提取props和插槽构建列配置数组，是自定义表格的核心逻辑。

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