具名插槽通过name属性定义多个内容接收点，支持父组件精准投递左区（Logo/标题）、中区（导航/搜索）、右区（操作按钮/用户信息）内容，并可结合作用域数据与默认内容提升Header组件的复用性、健壮性与可维护性。

具名插槽通过 name 属性定义多个内容接收点，让父组件能将不同区域的内容“对号入座”投递到子组件的指定位置，是构建可复用 Header 组件的核心手段。

明确划分 Header 的可定制区域

一个实用的 Header 通常包含左区（Logo/标题）、中区（导航或搜索）、右区（操作按钮/用户信息）。这些区域应各自对应一个具名插槽：

• <slot name="left"></slot> 接收自定义 Logo 或系统名称
• <slot name="center"></slot> 留给导航菜单、面包屑或搜索框
• <slot name="right"></slot> 承载退出按钮、用户头像等操作入口
• 未命名的 <slot></slot> 可作为整体后备内容，但实际项目中建议显式使用具名插槽提升可维护性

父组件精准投递，避免内容错位

在使用 Header 组件时，必须用 v-slot:xxx（或简写 #xxx）把内容绑定到对应名称，否则不会渲染：

• 写法要严格匹配：子组件是 name="right"，父组件就得用 #right，大小写与拼写都不能错
• 每个 <template #xxx></template> 块彼此独立，顺序不影响插入位置
• 不传某个插槽时，该区域显示其内部默认内容（如占位文字或空 div），不会影响其他区域

结合作用域数据，支持动态内容定制

如果 Header 需要展示登录用户信息或权限状态，可在插槽中暴露数据供父组件使用：

• 子组件中：<slot name="right" :user="currentUser" :hasPermission="canManage"></slot>
• 父组件中：<template #right="{ user, hasPermission }">{{ user.name }}<el-button v-if="hasPermission">管理</el-button></template>
• 这样既复用了 Header 结构，又把渲染逻辑和权限判断交由业务层控制

提供合理默认内容，增强组件健壮性

具名插槽内嵌默认实现，能防止父组件遗漏传入时界面异常：

• 例如：<slot name="left"><img src="logo.png" />后台系统</slot>
• 右区按钮也可内置基础退出逻辑：<slot name="right"><el-button @click="handleLogout">退出</el-button></slot>
• 这些默认内容仅在父组件未提供对应插槽时生效，不影响定制化覆盖

不复杂但容易忽略：Vue 3 中所有插槽统一用 v-slot，slot 和 slot-scope 已废弃；动态插槽名要用方括号语法，比如 v-slot:[tabName]。