Vue 组件动态展示 Slot，实现每行 6 个 Slot 自动换行

可以使用以下方式实现：

在 .vue 文件中，定义一个变量 slots，用于存储所有的 slot。

<template>
  <div>
    <div v-for='(row, index) in rows' :key='index' class='row'>
      <slot v-for='(slot, slotIndex) in row' :name=''slot-' + (index * 6 + slotIndex)'></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      slots: [],
    }
  },
  computed: {
    rows() {
      const rows = []
      const slots = this.slots.filter(slot => slot.tag === 'template')
      let currentRow = []
      for (let i = 0; i < slots.length; i++) {
        currentRow.push(slots[i])
        if ((i + 1) % 6 === 0 || i === slots.length - 1) {
          rows.push(currentRow)
          currentRow = []
        }
      }
      return rows
    },
  },
  mounted() {
    this.slots = this.$slots.default || []
  },
}
</script>

在 template 中，使用 v-for 循环展示每一行的 slot，使用 v-for 循环展示每个 slot。

在 computed 中，计算出需要展示多少行，以及每行需要展示多少个 slot。

在 mounted 中，获取所有的 slot，存储到 slots 变量中。

在 template 中，使用 slot 标签展示每个 slot，根据 slot 的索引计算出对应的 slot 名称。

这样，就可以根据传入的 slot 数量进行展示，超过 6 个就换行。