vue 插槽种类及示例

在 Vue 中，有三种类型的插槽：默认插槽、具名插槽和作用域插槽。

1. 默认插槽

默认插槽是没有名字的插槽，也称为匿名插槽。如果组件没有指定具名插槽，则使用默认插槽。默认插槽使用语法为 <slot></slot>。

示例：

<template>
  <div>
    <h1>我是标题</h1>
    <slot></slot>
  </div>
</template>

<template>
  <my-component>
    <p>我是默认插槽的内容</p>
  </my-component>
</template>

2. 具名插槽

具名插槽是有名字的插槽，可以在组件中定义多个具名插槽，使用时需要在 <slot> 标签中指定插槽的名字。具名插槽使用语法为 <slot name="slotName"></slot>。

示例：

<template>
  <div>
    <h1>我是标题</h1>
    <slot name="content"></slot>
    <slot name="footer"></slot>
  </div>
</template>

<template>
  <my-component>
    <template v-slot:content>
      <p>我是具名插槽 content 的内容</p>
    </template>
    <template v-slot:footer>
      <p>我是具名插槽 footer 的内容</p>
    </template>
  </my-component>
</template>

3. 作用域插槽

作用域插槽也称为插槽内容传递，是一种将数据从父组件传递到子组件的插槽。作用域插槽使用语法为 <slot v-bind:propName="prop"></slot>。

示例：

<template>
  <div>
    <h1>我是标题</h1>
    <slot name="content" v-bind:list="list"></slot>
  </div>
</template>

<template>
  <my-component>
    <template v-slot:content="slotProps">
      <ul>
        <li v-for="item in slotProps.list">{{ item }}</li>
      </ul>
    </template>
  </my-component>
</template>