插槽(slog) | 流年石刻

Vue 的插槽（Slot）机制是其组件化系统真正的精髓之一，它解决了“内容分发”的核心问题。彻底理解它，对构建可复用、高灵活性的组件至关重要。

我们来从“为什么需要插槽”开始，一步步拆解它的用法、原理，以及 Vue 2 和 3 的演进。

1. 为什么需要插槽？（核心问题）

想象一下，你正在封装一个通用的 <Modal>（弹窗）组件。这个组件的“架子”是固定的：一个灰色的遮罩层、一个白色的内容框、一个关闭按钮。

但是，弹窗的内容（body）是完全不确定的。

有时候它只显示一行文字。
有时候它需要一个复杂的表单。
有时候它甚至需要一个“头部”（header）和“底部”（footer）按钮区。

我们不可能为每一种情况都给 <Modal> 组件传入 props（比如 bodyText、showForm、footerButtons）。这样做会使组件的 props 变得异常臃肿且难以维护。

插槽的核心思想是：组件只负责“挖坑”（定义框架和布局），而“填坑”（填充具体内容）的权力和责任，则交还给使用该组件的父组件。

它实现了控制反转（Inversion of Control）：子组件（<Modal>）控制了_在哪里_以及_何时_显示内容，而父组件控制了_显示什么_内容。

2. 插槽的用法（从简单到复杂）

插槽的使用可以分为三类：

🔹 A. 默认插槽 (Default Slot)

这是最简单的形式，组件里只有一个“坑”。

子组件 (BaseCard.vue):

HTML

<div class="card">
  <div class="card-header">
    我是卡片头部
  </div>
  <div class="card-content">
    <slot></slot>
  </div>
</div>

父组件 (App.vue):

HTML
```
<BaseCard>
  <p>这是要插入卡片内容区的文字。</p>
  <img src="..." alt="image">
</BaseCard>
```
所有在 <BaseCard> 标签内部的内容，都会被“塞”进 <slot></slot> 所在的位置。

🔹 B. 具名插槽 (Named Slots)

当一个组件需要多个“坑”时（比如页头、页脚、侧边栏），我们就需要给它们命名。

子组件 (PageLayout.vue):

HTML

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot name="default"></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父组件 (App.vue):

Vue 3 语法 (推荐):

HTML

<PageLayout>
  <template v-slot:header>
    <h1>这里是我的网站Logo</h1>
  </template>

  <template #default>
    <p>这里是主要内容...</p>
  </template>

  <template #footer>
    <p>版权所有 © 2025</p>
  </template>
</PageLayout>

Vue 2 语法 (旧):

HTML

<PageLayout>
  <template slot="header">
    <h1>这里是我的网站Logo</h1>
  </template>

  <p>这里是主要内容...</p>

  <template slot="footer">
    <p>版权所有 © 2025</p>
  </template>
</PageLayout>

🔹 C. 作用域插槽 (Scoped Slots)

这是插槽最强大、也是最关键的用法。它解决了子组件的数据，如何在父组件的插槽内容中被使用的问题。

场景： 想象一个列表组件 <UserList>，它负责获取用户数据（users 数组），但它_不关心_每一行具体怎么渲染。它希望父组件来决定。

子组件 (UserList.vue):

它在循环时，通过属性绑定将数据（如 user）“暴露”给 <slot>。

HTML

<ul>
  <li v-for="user in users" :key="user.id">
    <slot :user="user" :index="index"></slot>
  </li>
</ul>

父组件 (App.vue):

Vue 3 语法 (推荐):

父组件在使用 v-slot 时，可以“接收”子组件暴露的数据。

HTML

<UserList>
  <template v-slot="slotProps">
    <div>
      <span>{{ slotProps.index }}</span>
      <strong>{{ slotProps.user.name }}</strong>
    </div>
  </template>

  <template v-slot="{ user, index }">
    <div class="user-profile">
      <span>{{ index + 1 }}.</span>
      <img :src="user.avatar" />
      <span>{{ user.name }}</span>
    </div>
  </template>
</UserList>

Vue 2 语法 (旧):

使用 slot-scope 属性来接收。

HTML

<UserList>
  <template slot-scope="slotProps">
    <div>
      <span>{{ slotProps.index }}</span>
      <strong>{{ slotProps.user.name }}</strong>
    </div>
  </template>

  <template slot-scope="{ user, index }">
    ...
  </template>
</UserList>

作用域插槽的本质： 它将插槽变成了一个“以子组件数据为参数的函数”，这个函数在父组件的作用域中定义，但在子组件的作用域中执行。这是一种极其灵活的模式，常用于高阶组件和可复用列表的封装。

3. 实现原理（深入理解）

要理解原理，我们必须跳出模板，思考 Vue 是如何编译和渲染的。

编译阶段（父组件）：

当父组件的模板被编译时，例如：

HTML
```
<UserList>
  <template v-slot="{ user }">
    <strong>{{ user.name }}</strong>
  </template>
</UserList>
```
编译器并_不会_在父组件的渲染函数（render）中立刻执行和渲染 <strong>{{ user.name }}</strong>。

相反，它会将这个 <template> 编译成一个渲染函数，例如 (scopedData) => VNode。这个函数接受一个参数（即子组件传来的 scopedData，这里是 { user }），然后返回 VNode（虚拟 DOM 节点）。
传递阶段（父组件 -> 子组件）：

父组件在渲染 <UserList> 组件时，会将这个编译好的“插槽函数”作为 VNode 的子节点数据（在 Vue 3 中是 slots 对象）传递给 <UserList> 子组件。

父组件的渲染大致（伪代码）是：

h(UserList, null, { default: ({ user }) => h('strong', user.name) })

（h 是 createElement 的缩写，{...} 就是传递的 $slots 对象）
渲染阶段（子组件）：

子组件（<UserList>）的渲染函数在执行时，会遇到 <slot> 标签。例如：

当它渲染到这里时，它会：

a. 查找父组件是否传递了 default 插槽（this.$slots.default）。

b. 如果找到了（发现它是一个函数），子组件会调用这个函数，并把自己的数据（{ user: ..., index: ... }）作为参数传进去。

c. 即：this.$slots.default({ user: this.user, index: this.index })。

d. 这个函数（在父组件中定义）被执行，返回了 ... 的 VNode。

e. 子组件将这个返回的 VNode 插入到自己 VDOM 树中 <slot> 标签所在的位置。

总结原理：

插槽的实现，本质上是父组件向子组件传递了一个或多个 “VNode 工厂函数”（即插槽函数）。子组件在自己的渲染流程中，决定何时以及如何 （用什么数据）去调用这些函数，并将函数返回的 VNode 渲染到指定位置。

4. Vue 2 与 Vue 3 的核心区别

Vue 3 对插槽进行了重大的重构，使其更统一、更高效、更易于理解。

区别一：语法统一 (v-slot)

Vue 2: 语法混乱。具名插槽用 slot="name"，作用域插槽用 slot-scope="props"。两者是不同的属性，令人困惑。
Vue 3: 全面统一为 v-slot 指令。
- v-slot:header (具名)
- v-slot:default="props" (默认 + 作用域)
- v-slot:header="headerProps" (具名 + 作用域)
- 并提供了缩写 # (例如 #header 和 #default="props")。
- v-slot 只能用在 <template> 标签上（只有一个例外：当_只_使用默认插槽时，可以简写在组件标签上，如 <UserList v-slot="{ user }">）。

区别二：内部实现与性能 (最核心的区别)

这是最根本的区别，也是 Vue 3 性能提升的原因之一。

Vue 2: 内部有两种不同的插槽。
1. this.$slots (静态插槽): 对应非作用域插槽。它是一个VNode 数组。
2. this.$scopedSlots (作用域插槽): 对应作用域插槽。它是一个对象，值是函数 ({ name: (props) => VNode })。
- 问题在于：
  - 不一致： 开发者在子组件中需要根据情况访问 $slots 或 $scopedSlots。
  - 性能损耗： 静态插槽 ($slots) 是在父组件渲染时就被创建成 VNode 数组的。如果父组件更新，会_强制_子组件也更新（因为 VNode 数组是新的引用），即使子组件根本没用到那些插槽，或者插槽内容没变。
Vue 3: 所有插槽都被统一了。
1. this.$slots (Options API) 或 useSlots() (Composition API) 始终是一个对象，值都是函数 ({ name: (props) => VNode })。
2. 没有静态插槽了。即使是 v-slot:header 这种不带作用域的，在内部也会被编译成一个函数：header: () => [ VNode... ]。
- 带来的好处：
  1. API 一致性： 子组件始终通过 this.$slots.name() 来调用和渲染插槽。
  2. 性能优化 (懒执行)： 插槽函数只有在子组件实际渲染（即调用 this.$slots.name()) 时才会被执行。
  3. 更智能的更新： 当父组件更新时，只要插槽函数本身没有改变（即父组件的依赖没变），子组件就_不会_因为插槽而强制更新。子组件的更新与父组件的更新解耦了。

总结对比表

特性	Vue 2	Vue 3
具名语法	`slot="name"` (在 `<template>` 或元素上)	`v-slot:name` 或 `#name` (几乎只能在 `<template>` 上)
作用域语法	`slot-scope="props"` (在 `<template>` 或元素上)	`v-slot="props"` 或 `v-slot:name="props"`
内部 API	`$slots` (VNode 数组) 和 `$scopedSlots` (函数对象)	`$slots` (统一的函数对象)
性能	静态插槽在父组件渲染时求值	所有插槽都在子组件渲染时才“懒执行”
更新机制	父组件更新可能导致不必要的子组件更新	父子组件更新解耦，更高效

总结与观点

插槽是 Vue 组件组合的灵魂。从 Vue 2 到 Vue 3 的演进，不仅仅是语法的改变（v-slot），更重要的是内部实现的统一和优化。

Vue 3 将所有插槽统一为“渲染函数”，实现了完全的懒加载和更精确的依赖追踪。这使得组件的父子更新关系更加解耦和高效。这种架构上的清晰统一，是 Vue 3 相较于 Vue 2 在设计哲学上的一大进步。

你是否希望了解一下如何利用插槽来封装高阶组件（HOC）或者实现“Renderless”组件模式？

<UserList> <template v-slot="slotProps"> <div> <span>{{ slotProps.index }}</span> <strong>{{ slotProps.user.name }}</strong> </div> </template> <template v-slot="{ user, index }"> <div class="user-profile"> <span>{{ index + 1 }}.</span> <img :src="user.avatar" /> <span>{{ user.name }}</span> </div> </template> </UserList>

<UserList> <template slot-scope="slotProps"> <div> <span>{{ slotProps.index }}</span> <strong>{{ slotProps.user.name }}</strong> </div> </template> <template slot-scope="{ user, index }"> ... </template> </UserList>

特性

Vue 2

Vue 3

具名语法

slot="name" (在 <template> 或元素上)

v-slot:name 或 #name (几乎只能在 <template> 上)

作用域语法

slot-scope="props" (在 <template> 或元素上)

v-slot="props" 或 v-slot:name="props"

内部 API

$slots (VNode 数组) 和 $scopedSlots (函数对象)

$slots (统一的函数对象)

性能

静态插槽在父组件渲染时求值

所有插槽都在子组件渲染时才“懒执行”

更新机制

父组件更新可能导致不必要的子组件更新

父子组件更新解耦，更高效