Vue3封装组件：嵌套动态插槽

需求背景：
在构建动态表格时，需要根据不同的状态显示不同的单元格内容。即：在 index.vue 中引入了自定义的 Table 组件，并通过该组件的子组件 TableBody 来管理表格主体的内容展示（之所以抽离出 TableBody 组件，是用于在 Table 中控制显示不同场景下内容，如自动滚动和手动滚动）。因此，通过插槽机制，允许 index.vue 传递差异化数据，以便定制化每个单元格的显示。

难点：
由于 TableBody.vue 内的插槽名称是基于 index.vue 中动态提供的数据而变化的，所以不能提前确定插槽的具体名称和数量。此外，Table.vue 作为中间层，需要一种方法来适应这些动态变化，同时保持对插槽内容的有效传递。

解决方案：
在 Table.vue 中通过遍历 slots 对象（useSlots API），动态响应来自 index.vue 定义的插槽，并将其传递给 TableBody.vue。同时在 TableBody.vue 内通过逻辑判断选择性地显示相应的插槽内容或默认信息。

（以下为简化后的示例代码）
1、index.vue

<template>
    <Table :data="data">
        <template #name1>
            <div>插槽一内容</div>
        </template>
        <template #name2>
            <div>插槽二内容</div>
        </template>
    </Table >
</template>

<script setup name="Index">
import Table from './Table'
const data = ref([
    { title: "插槽一", slotName: "name1" },
    { title: "插槽二", slotName: "name2" },
])
</script>

2、Table.vue

<template>
    <div>
        <TableBody :data="data">
            <template v-for="name in Object.keys(slots)" :key="name" #[name]>
                <slot :name="name"></slot>
            </template>
        </TableBody>
    </div>
</template>

<script setup name="Table">
import TableBody from './TableBody'
const props = defineProps({
    data: {
        type: Array,
        default: () => []
    },
})
const slots = useSlots()
</script>

3、TableBody.vue

<template>
    <div v-for="(item, i) in data" :key="i">
        <template v-if="Object.keys(slots).indexOf(item.slotName) == -1"">
            <span>未匹配到插槽</span>
        </template>
        <template v-else>
            <slot :name="item.slotName" :item="item"></slot>
        </template>
    </div>
</template>

<script setup name="TableBody">
const props = defineProps({
    data: {
        type: Array,
        default: () => []
    },
})
const slots = useSlots()
</script>