vue3 动态插槽

在 Vue 3 中，可以使用 `<slot>` 元素来定义插槽，通过 `v-slot` 指令来将具名插槽绑定到子组件的内容。动态插槽是指根据父组件的数据动态地选择不同的插槽进行渲染。

可以使用 `v-if` 或 `v-for` 等指令来动态地选择不同的插槽。例如：

<template>
  <div>
    <component :type="type">
      <template v-if="type === 'A'">
        <h1 slot="title">Title A</h1>
      </template>
      <template v-else-if="type === 'B'">
        <h1 slot="title">Title B</h1>
      </template>
      <template v-else>
        <h1 slot="title">Default Title</h1>
      </template>
    </component>
  </div>
</template>

在这个例子中，父组件通过 `type` 属性来指定子组件的类型，然后根据不同的类型选择不同的插槽。如果 `type` 是 `'A'`，则渲染 `Title A`，如果是 `'B'`，则渲染 `Title B`，否则就渲染默认的 `Default Title`。