Vue3中插槽(slot)用法汇总(推荐)

Vue3中的插槽(slot)是一种强大的功能，用于在组件中定义可复用的模板部分。本攻略将详细介绍Vue3中插槽的用法，并提供两个示例说明。

基本用法

插槽可以在组件的模板中定义，并在组件的使用者中进行填充。以下是插槽的基本用法：

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

<!-- 使用父组件 -->
<template>
  <div>
    <ParentComponent>
      <p>这是插槽的内容</p>
    </ParentComponent>
  </div>
</template>

在上述示例中，父组件中的<slot></slot>表示插槽的位置，使用父组件时，可以在其中填充内容。

具名插槽

除了默认插槽外，Vue3还支持具名插槽，用于在组件中定义多个插槽。以下是具名插槽的示例：

<!-- 父组件 -->
<template>
  <div>
    <slot name=\"header\"></slot>
    <slot></slot>
    <slot name=\"footer\"></slot>
  </div>
</template>

<!-- 使用父组件 -->
<template>
  <div>
    <ParentComponent>
      <template v-slot:header>
        <h1>这是头部插槽的内容</h1>
      </template>
      <p>这是默认插槽的内容</p>
      <template v-slot:footer>
        <footer>这是底部插槽的内容</footer>
      </template>
    </ParentComponent>
  </div>
</template>

在上述示例中，父组件中使用了三个插槽，分别是默认插槽和具名插槽。使用父组件时，可以使用v-slot指令来填充具名插槽的内容。

这就是Vue3中插槽的基本用法和具名插槽的示例说明。插槽是Vue3中非常有用的功能，可以帮助我们更好地组织和复用组件的模板部分。