具名插槽通过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></template>块彼此独立，顺序不影响插入位置 - 不传某个插槽时，该区域显示其内部默认内容（如占位文字或空 div），不会影响其他区域
结合作用域数据，支持动态内容定制
如果 Header 需要展示登录用户信息或权限状态，可在插槽中暴露数据供父组件使用：
- 子组件中：
<slot name="right" :user="currentUser" :haspermission="canManage"></slot> - 父组件中：
<template 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>退出</el-button></slot> - 这些默认内容仅在父组件未提供对应插槽时生效，不影响定制化覆盖
不复杂但容易忽略：Vue 3 中所有插槽统一用 v-slot，slot 和 slot-scope 已废弃；动态插槽名要用方括号语法，比如 v-slot:[tabName]。
