Vue3 插槽使用指南：从基础到高级用法

在 Vue3 中，插槽的使用方式与 Vue2 有所不同。Vue3 中的插槽使用 <slot> 标签来定义插槽，同时可以使用 v-slot 指令来指定插槽的名称。

下面是一个简单的例子：

<!-- 父组件 -->
<template>
  <div>
    <child>
      <template v-slot:default>
        这是父组件的内容
      </template>
    </child>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

在上面的例子中，父组件使用 <child> 标签来引入子组件，并在 <template> 标签中使用 v-slot:default 指定了一个名为 default 的插槽，并在插槽中定义了一些内容。子组件中使用 <slot> 标签来定义插槽的位置。

除了使用 v-slot 指令来指定插槽的名称之外，Vue3 还提供了一种新的语法糖——# 符号来简化插槽的使用。例如，上面的例子可以改写为：

<!-- 父组件 -->
<template>
  <div>
    <child>
      <template #default>
        这是父组件的内容
      </template>
    </child>
  </div>
</template>

<!-- 子组件 -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

使用 # 符号和 v-slot 指令是等价的，可以根据个人喜好来选择使用哪种方式。