具名插槽是 Vue 3 中组织多块布局最直接、最可控的方式，通过命名出口与精准投递实现结构清晰、语义明确、维护成本低的组件通信。
具名插槽是 Vue 3 中组织多块布局最直接、最可控的方式。它不依赖 props 传内容，也不靠事件通信，而是让父组件把不同区域的内容“按名字投递”到子组件预设的对应位置，结构清晰、语义明确、维护成本低。
明确命名 + 对应投递
子组件用 <slot name="xxx"> 定义多个具名出口，比如 header、sidebar、main、footer；父组件用 <template #xxx> 把内容精准塞进去。顺序无关，只看 name 匹配。
- 子组件（Layout.vue）中写：
<header><slot name="header">默认标题</slot></header><aside><slot name="sidebar">默认侧边栏</slot></aside><main><slot>默认主体</slot></main> - 父组件中写：
<Layout><template #header><h1>仪表盘</h1></template><template #sidebar><NavMenu /></template><p>这里是主内容区（走默认插槽）</p></Layout>
带默认内容，提升健壮性
每个具名插槽都可内置 fallback 内容，避免父组件漏传时页面空白。
<slot name="header"><h2 class="placeholder">未设置标题</h2></slot><slot name="actions"><Button disabled>暂无操作</Button></slot>
这样即使某次调用没传 #actions，界面依然完整可读。
立即学习“前端免费学习笔记（深入）”；
结合条件与循环，支持动态布局
具名插槽本身静态，但它的使用可以是动态的——用 v-if 控制是否渲染某个 <template #xxx>，或用 v-for 批量生成插槽组。
- 按权限显示操作区：
<template #actions v-if="hasPermission('edit')"><EditBtn /></template> - 循环渲染多个工具栏区域：
<template v-for="tab in tabs" :key="tab.key" #[tab.slotName]><TabContent :tab="tab" /></template>
语义化命名，避免歧义
别用 left、right 这类方位词，改用功能或角色命名，比如 toolbar、filter-panel、data-summary。这样即使将来布局从左右变上下，插槽名也不用改，逻辑更稳定。
实际项目中，一个后台框架组件通常会固定定义 header、nav、breadcrumb、content、footer 几个具名插槽，所有页面统一遵循，就能快速搭建风格一致、结构可预期的多页应用。
