前言

在组件化开发中，插槽 (Slot) 是实现内容分发（Content Distribution）的核心机制。它允许我们将组件的“外壳”与“内容”解耦，让组件具备极高的扩展性。

一、 什么是插槽？

插槽是子组件提供给父组件的 “占位符” ，用 标签表示。父组件传递的任何模板代码（HTML、组件等）都会替换子组件中的 标签。

二、 插槽的三大类型

1. 默认插槽 (Default Slot)

最基础的插槽，不需要定义 name 属性。

• 特点：一个子组件通常只建议使用一个默认插槽。

示例：

2. 具名插槽 (Named Slots)

当子组件需要多个占位符时，通过 name 属性来区分。

• 语法糖：v-slot:header 可以简写为 #header。

示例：

3. 作用域插槽 (Scoped Slots)

核心价值： “子传父” 的特殊形式。子组件将内部数据绑定在 上，父组件在填充内容时可以接收并使用这些数据。

示例：

 
<template>
  <UserList>
    <template #default="{ user }">
      <span :style="{ color: user.role === '管理员' ? 'red' : 'blue' }">
        {{ user.name }} - 【{{ user.role }}】
      span>
    template>
  UserList>
template>

三、 补充：插槽的默认内容

在子组件中，你可以在 标签内部放置内容。如果父组件没有提供任何插槽内容，则会渲染这些“后备内容”；如果提供了，则会被覆盖。

这是如果没有内容时显示的默认文本

四、 总结：如何选择插槽？