Vue 3 插槽 - 灵活的组件内容分发

Vue 3 中的插槽与 Vue 2 中的插槽有一些不同。在 Vue 3 中，插槽被称为'组合式插槽'，它提供了更多的灵活性和功能。

在 Vue 3 中，可以使用<slot>元素来定义一个插槽，使用v-slot指令来给插槽命名。例如：

<template>
  <div>
    <slot name='header'></slot>
    <slot></slot>
    <slot name='footer'></slot>
  </div>
</template>

在使用组件时，可以使用v-slot指令来将内容分发到对应的插槽中。例如：

<template>
  <MyComponent>
    <template v-slot:header>
      <h1>这是头部插槽的内容</h1>
    </template>
    <p>这是默认插槽的内容</p>
    <template v-slot:footer>
      <p>这是尾部插槽的内容</p>
    </template>
  </MyComponent>
</template>

在上面的例子中，MyComponent组件定义了三个插槽：header、默认插槽和footer。使用v-slot指令可以将内容分发到对应的插槽中。

除了使用命名插槽，Vue 3 还引入了一种新的语法糖来简化插槽的使用。可以使用#来代替v-slot指令。例如：

<template>
  <MyComponent>
    <h1 #header>这是头部插槽的内容</h1>
    <p>这是默认插槽的内容</p>
    <p #footer>这是尾部插槽的内容</p>
  </MyComponent>
</template>

使用#来定义插槽，可以使代码更简洁易读。

总结起来，Vue 3 中的插槽提供了更多的灵活性和功能，可以使用<slot>元素来定义插槽，使用v-slot指令（或#语法糖）来分发内容到插槽中。