具名插槽是组织多区域模板结构最直接有效的方式，核心在于“按名投递、各就各位”，子组件用定义命名插槽，父组件用v-slot:xxx或#xxx精准投递内容，支持fallback与语义化命名，提升可维护性。

具名插槽是组织多区域模板结构最直接有效的方式，核心在于“按名投递、各就各位”。它让子组件定义多个明确命名的插入点，父组件把对应内容精准送到指定位置，避免嵌套判断和冗余 props。

子组件中定义多个具名插槽

在子组件模板里，用 标识不同区域。每个 name 就是一个独立插槽位，比如 header、main、footer、aside 等。默认插槽（不带 name）仍可保留作为主内容区。

• name 值必须是合法的标识符，建议用语义化英文小写，如 header、actions、empty
• 可以为每个具名插槽设置 fallback 内容，即当父组件没传内容时显示的默认文案或结构
• 多个具名插槽之间互不影响，顺序也不影响渲染逻辑

父组件中用 v-slot 指定内容位置

父组件使用子组件时，通过 v-slot:xxx 或简写 #xxx 把内容绑定到对应插槽。必须配合 标签使用（除非是单个元素且用旧式 slot="xxx" 写法，但 Vue 3 推荐统一用 v-slot）。

• 推荐写法：<template><h1>标题</h1></template>
• 多个插槽并列书写，顺序无关，Vue 会按 name 自动匹配
• 如果某插槽未提供内容，对应位置就渲染其 fallback（即 slot 标签内的默认内容）

常见组合结构示例

一个典型布局组件常包含 header / default / footer 三部分：

立即学习“前端免费学习笔记（深入）”；

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 子组件 Layout.vue 中：<header><slot name="header">默认页头</slot></header>、<main><slot>默认主体</slot></main>、<footer><slot name="footer">默认页脚</slot></footer>
• 父组件调用时：<layout>用户管理" #footer="<p>© 2026</p>"><p>表格列表</p></layout>，其中中间的 <p>表格列表</p> 自动进入默认插槽

设计时要注意的关键细节

具名插槽不是语法糖，而是组件职责划分的体现。用得好，能大幅降低后续维护成本。

• 插槽名要稳定：一旦对外发布，改 name 就是 breaking change，需同步更新所有调用方
• 避免过度拆分：不是每个小区域都要具名，只对真正需要定制的区块设 slot，比如操作栏、空状态、加载提示等
• 与作用域插槽结合可扩展性更强：例如 <slot name="item" :row="item"></slot>，让父组件不仅能换结构，还能用子组件数据