VueJS：如何将插槽与作用域插槽向下传递至嵌套子组件

要实现把UsersTable的插槽（包括普通插槽和作用域插槽）传递到DataTable内部的b-table中，核心思路是在DataTable组件中透传所有接收到的插槽给内部的b-table。下面分步骤给出具体实现方式：

1. 封装DataTable组件，透传所有插槽 #

在DataTable的模板里，我们需要处理两种插槽：普通插槽（如table-caption）和作用域插槽（如cell-<fieldName>类的字段格式化插槽）。利用Vue的$slots和$scopedSlots（Vue 2）或合并后的$slots（Vue 3），可以实现批量透传，不用逐个手动声明插槽。

Vue 2 + Bootstrap-Vue 实现代码 #

<template>
  <b-table
    :items="items"
    :fields="fields"
    <!-- 其他b-table需要的props可按需传入 -->
  >
    <!-- 透传普通插槽 -->
    <template
      v-for="(_, slotName) in $slots"
      v-slot:[slotName]
    >
      <slot :name="slotName"></slot>
    </template>

    <!-- 透传作用域插槽 -->
    <template
      v-for="(_, slotName) in $scopedSlots"
      v-slot:[slotName]="scope"
    >
      <slot :name="slotName" v-bind="scope"></slot>
    </template>
  </b-table>
</template>

<script>
export default {
  name: 'DataTable',
  props: {
    items: {
      type: Array,
      required: true
    },
    fields: {
      type: Array,
      required: true
    }
    // 其他需要透传的props可在这里定义
  }
}
</script>

Vue 3 + Bootstrap-Vue Next 简化写法 #

Vue 3中$scopedSlots已合并到$slots中，写法更简洁：

<template>
  <b-table
    :items="items"
    :fields="fields"
  >
    <template
      v-for="(_, slotName) in $slots"
      v-slot:[slotName]="scope"
    >
      <slot :name="slotName" v-bind="scope || {}"></slot>
    </template>
  </b-table>
</template>

2. 在UsersTable中使用DataTable并传入b-table支持的插槽 #

现在你可以直接在UsersTable里像使用原生b-table一样写插槽，这些插槽会自动透传给DataTable内部的b-table：

<template>
  <DataTable
    :items="users"
    :fields="userFields"
  >
    <!-- 普通插槽：自定义表格标题 -->
    <template #table-caption>
      <h3 class="text-center mt-2">系统用户列表</h3>
    </template>

    <!-- 作用域插槽：格式化username字段为可点击链接 -->
    <template #cell-username="scope">
      <a :href="`/user/detail/${scope.item.id}`" class="text-primary">
        {{ scope.item.username }}
      </a>
    </template>

    <!-- 作用域插槽：自定义操作列按钮 -->
    <template #cell-actions="scope">
      <b-button size="sm" @click="handleEdit(scope.item)">编辑</b-button>
      <b-button size="sm" variant="danger" class="ml-2" @click="handleDelete(scope.item)">删除</b-button>
    </template>
  </DataTable>
</template>

<script>
import DataTable from './DataTable.vue'

export default {
  name: 'UsersTable',
  components: { DataTable },
  data() {
    return {
      users: [
        { id: 1, username: 'alice', email: 'alice@example.com' },
        { id: 2, username: 'bob', email: 'bob@example.com' }
      ],
      userFields: ['username', 'email', 'actions']
    }
  },
  methods: {
    handleEdit(user) { /* 编辑用户逻辑 */ },
    handleDelete(user) { /* 删除用户逻辑 */ }
  }
}
</script>

关键原理说明 #

• 普通插槽透传：通过遍历$slots对象，动态创建对应名称的插槽，把UsersTable中传入的普通插槽内容无缝传递给b-table的同名插槽。
• 作用域插槽透传：遍历作用域插槽集合，动态绑定插槽名并接收b-table提供的作用域参数（如scope.item），再把参数传递给UsersTable中对应的插槽，确保能正常获取表格行数据。
• 这种方式的优势是完全兼容b-table的插槽体系，不需要在DataTable中逐个声明支持的插槽，只要b-table有的插槽，UsersTable都能直接使用。

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