组件多插槽的使用

   <BtnHandle :eventBtn="eventBtn">
              <template
                v-for="(_, slotKey, slotIndex) in $slots"
                :key="slotIndex"
                #[slotKey]="slotData"
              >
                <slot :name="slotKey" v-bind="slotData"></slot>
              </template>
</BtnHandle>

1. `v-for` 循环：这一部分使用 `v-for` 指令来遍历 `$slots` 对象中的属性。`$slots` 包含了当前组件中的所有插槽，每个属性的名称对应一个插槽名称。在这个循环中，`slotKey` 是属性的名称，`slotIndex` 是属性的索引。

2. `:key` 绑定：对于每个循环迭代，`slotIndex` 用作 `:key` 属性的值，以确保每个模板都有唯一的标识符。

3. `#[slotKey]`：这是 Vue 3.x 中 Composition API 的模板语法，它用于指定插槽名称。它的作用是将当前模板关联到具名插槽 `slotKey`。这会将模板内容分发到名为 `slotKey` 的插槽中。

4. `<slot :name="slotKey" v-bind="slotData"></slot>`：这是在模板中插入具名插槽的语法。它会渲染具名插槽，并通过 `:name` 属性将内容分发到对应的插槽名称（`slotKey`）。此外，`v-bind="slotData"` 用于将 `slotData` 中的数据传递给插槽，使插槽中可以访问这些数据。

总之，这段代码是一个高级用法，用于动态处理和渲染具名插槽，根据 `$slots` 中的插槽名称来构建和分发内容。这种技术可能在一些复杂的组件或插槽管理中有用，但可能对于一般的 Vue.js 应用程序不是很常见。