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指令是等价的，可以根据个人喜好来选择使用哪种方式