vue3中使用多个动态插槽名

在Vue3中，可以使用 `v-slot` 指令来定义动态插槽名。如果需要使用多个动态插槽名，可以在 `v-slot` 后面加上一个对象，对象中的属性就是动态插槽名。例如：

<template>
  <div>
    <slot v-bind="header"></slot>
    <slot v-bind="footer"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      header: { name: "header" },
      footer: { name: "footer" }
    };
  }
};
</script>

在上面的例子中，我们定义了两个动态插槽名 `header` 和 `footer`，并且在模板中使用了 `v-bind` 指令来绑定动态插槽名。在父组件中使用这个组件时，可以这样写：

<template>
  <my-component>
    <template v-slot:[header.name]>
      <!-- 插槽内容 -->
    </template>
    <template v-slot:[footer.name]>
      <!-- 插槽内容 -->
    </template>
  </my-component>
</template>

<script>
import MyComponent from "./MyComponent.vue";

export default {
  components: {
    MyComponent
  }
};
</script>

在上面的例子中，我们使用了动态绑定的语法 `[header.name]` 和 `[footer.name]` 来动态绑定插槽名。注意，这里的 `header.name` 和 `footer.name` 分别对应前面组件中定义的动态插槽名。