官方文档 https://cn.vuejs.org/guide/introduction.html

什么是插槽

在 Vue.js 中，插槽（Slots）是一项非常有效的功能，它允许我们在组件中预留一个占位符，供父组件插入自定义的内容。

具体来说，当一个组件使用 slot 标记定义插槽后，父组件可以通过向 slot 标记插入内容来影响子组件的最终渲染结果。这使得组件的可定制化程度更高，同时也降低了组件的耦合度，使得组件更容易被复用。插槽可以用于展示文本、HTML、组件，甚至是动态地修改子组件的行为。

三种类型的插槽

在 Vue.js 中，有三种类型的插槽，各自具有不同的用途和语法：

1. 默认插槽（Default Slots）: 默认插槽是最常用的插槽类型，也称为匿名插槽。 默认插槽是组件模板中，没有被命名 slot 标记之一的元素。默认插槽用来渲染组件之间的内容。

2. 命名插槽（Named Slots）: 命名插槽可以让父组件将一个或多个内容插入到组件模板中具有特定名称的插槽位置。组件可以提供具有一个相应名称的插槽，父组件就可以将任意数量的内容插入到该插槽中。

3. 作用域插槽（Scoped Slots）: 作用域插槽是一个具有一定特殊语法的插槽类型，它会将组件内部的一个片段包装在接收到的 props 的环境中，以便父组件可以在插槽内容中访问数据。与命名插槽类似，父组件会向子组件传递一个模板，并在该模板中使用插槽。但与命名插槽不同的是，作用域插槽具有向插槽内容中传递数据的能力，这样子组件就可以自己组织插槽内容展示的方式了。

这三种插槽类型，都是 Vue.js 实现组件化的核心能力。可以方便地实现组件之间内容的动态插入和样式的复用。哪种插槽使用，最终取决于具体的需求和设计。

举例详述

下面分别用具体的例子来讲解三种插槽的使用方法：

1. 默认插槽（Default Slots）：目的是为了让父组件可以在子组件内插入自定义的内容，下面是一个默认插槽的例子：

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

上面的代码定义了一个子组件，里面包括一个默认插槽，可以让父组件插入任意内容。下面是父组件插入内容的方式：

<template>
  <div>
    <my-component>
      <p>我是来自父组件的自定义内容</p>
    </my-component>
  </div>
</template>

上面的代码说明了如何在父组件中，向子组件的默认插槽中插入自定义的内容，即 my-component 的标签之间插入了一个 p 标签，并添加了自定义内容。

2. 命名插槽（Named Slots）：目的是为了让父组件可以在子组件中指定具体的插槽位置，下面是一个命名插槽的例子：

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

上面的代码定义了一个子组件，里面包括两个命名插槽，可以让父组件分别向不同的插槽中插入不同的内容。下面是父组件插入内容的方式：

<template>
  <div>
    <my-component>
      <template v-slot:content>
        <p>我是来自父组件的自定义内容</p>
      </template>
      <template v-slot:footer>
        <button>确定</button>
      </template>
    </my-component>
  </div>
</template>

上面的代码说明了如何在父组件中，向子组件中指定具体的命名插槽位置，并插入不同的内容。

3. 作用域插槽（Scoped Slots）：目的是为了让父组件可以向子组件传递数据，并在子组件中根据数据动态生成内容，下面是一个作用域插槽的例子：

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

上面的代码定义了一个子组件，里面包括一个作用域插槽，可以让父组件向子组件传递数据。下面是父组件向子组件传递数据并生成内容的方式：

<template>
  <div>
    <my-component>
      <template v-slot:content="{ data }">
        <p>{{ data }}</p>
      </template>
    </my-component>
  </div>
</template>

上面的代码说明了如何在父组件中，向子组件的作用域插槽中传递数据，并在子组件中根据数据生成内容。此处展示的是最简单的数据传递，你可以根据具体需求，在数据传递和渲染内容时进行差异化处理。