Vue3自定义DataTable组件：如何将插槽转发至底层组件？

你可以通过Vue的插槽批量转发能力，自动将自定义组件接收的所有插槽（包括具名插槽、作用域插槽）转发给底层的DataTable组件，不用手动逐个复制插槽模板，同时能正常传递插槽的作用域参数（比如item）。

修改你的自定义组件模板部分即可：

<template>
  <DataTable table-class-name="table-theme" :theme-color="themeColor" alternating>
    <!-- 批量转发所有插槽 -->
    <template v-for="(_, slotName) in $slots" #[slotName]="slotProps">
      <slot :name="slotName" v-bind="slotProps"></slot>
    </template>
  </DataTable>
</template>

<script>
export default {
  setup() {
    const themeColor = getComputedStyle(document.documentElement).getPropertyValue('--primary');
    return { themeColor }
  }
}
</script>

<style lang="scss" scoped>
.table-theme {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

关键说明 #

• $slots是Vue提供的内置对象，包含了父组件传递给当前自定义组件的所有插槽。
• 通过v-for遍历$slots，动态绑定插槽名（#[slotName]），同时把插槽的作用域参数（slotProps，也就是你之前用到的item）传递给内部的<slot>，这样父组件传递的任何插槽（包括expand、其他自定义插槽）都会自动转发给底层的DataTable。
• 如果需要对某个特定插槽做额外处理（比如添加默认内容），可以单独写该插槽的模板，Vue会优先使用单独定义的插槽，覆盖批量转发的逻辑，比如：

  <template>
    <DataTable ...>
      <!-- 单独处理expand插槽，添加默认内容 -->
      <template #expand="item">
        <slot name="expand" v-bind="item">
          <!-- 默认展开内容 -->
          <div>暂无展开内容</div>
        </slot>
      </template>
      <!-- 转发其他所有插槽 -->
      <template v-for="(_, slotName) in $slots" #[slotName]="slotProps" v-if="slotName !== 'expand'">
        <slot :name="slotName" v-bind="slotProps"></slot>
      </template>
    </DataTable>
  </template>
  

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