vue3的插槽类似占位符，不管是前端还是后端，通常使用占位符的地方一般都是要复用的地方。通过使用插槽，模版负责渲染（基本结构&样式），数据由调用方提供。后端简单理解，用户注册成功后系统会给用户发送邮件，通常注册成功邮件都是统一的模版（基本文案&样式），其中变量（比如用户名，注册日期）是占位符。系统发邮件时调用指定模版，传递动态变量。

vue3官网示例：

// 父元素传入插槽内容
FancyButton('Click me!')
// 堆代码 duidaima.com
// FancyButton 在自己的模板中渲染插槽内容
function FancyButton(slotContent) {
  return `<button class="fancy-btn">
      ${slotContent}
    </button>`
}

模版组件：

<template>
    <div class="default_slot">
        <!-- slot包裹的是默认值 -->
        <h1><slot>我是一个slot的默认值</slot></h1>
    </div>
    <div class="first_slot">
        <!-- slot有name的是具名插槽 -->
        <h2><slot name="first">我是一个名为first的slot</slot></h2>
    </div>
    <div class="second_slot">
        <h3><slot name="second">我是一个名为second的slot</slot></h3>
    </div>
</template>
<script setup>
</script>
<style scoped>
.default_slot{
    color: pink;
}
.first_slot{
    color: lightblue;
}
.second_slot{
    color: lightgreen;
}
</style>

调用方组件：

<template>
  <test>
    <!-- 显式使用默认插槽 -->
    <template #default>我是父组件</template>
    <template #first>我是父组件的first</template>
    <template #second>我是父组件的second</template>
  </test>
</template>
<script setup>
import test from "@/views/test.vue"
</script>

概要说明：
1.调用方使用具名插槽时v-slot:插槽名，简写为#插槽名
2.具名非具名混用时，最好显式使用默认插槽
3.<slot>会被替换掉，样式可以写在<slot>的父标签上