具名插槽是Vue实现组件内容分发的关键机制，本质是Vue模板编译的语法糖，通过<slot name="xxx">声明接收点、v-slot:xxx或#xxx注入内容，并支持作用域数据传递与动态插槽名。
具名插槽（Named Slot）是 Vue 中实现组件内容分发的关键机制，HTML 原生的 <slot> 标签本身不支持 name 属性——那是 Vue 模板编译后识别的语法糖。真正起作用的是 Vue 解析器对 <slot name="xxx"> 的处理，而非浏览器原生行为。
Vue 中的具名插槽写法
在 Vue 单文件组件中，父组件通过 v-slot:xxx（或简写 #xxx）向子组件指定位置插入内容，子组件用带 name 的 <slot> 标签声明接收点：
- 子组件（如
Card.vue）中定义多个具名插槽：<slot name="header"></slot><slot name="body"></slot><slot name="footer"></slot> - 父组件使用时按名注入：
<Card>
<template #header>卡片标题</template>
<template #body>主要内容区域</template>
<template #footer>操作按钮</template></Card>
name 属性的作用与限制
name 是 <slot> 标签的属性，仅在 Vue 模板中有效，用于建立“插槽名 → 内容块”的映射关系：
- 默认插槽无需
name，对应v-slot:default或省略名的<template> - 具名插槽名区分大小写，建议用 kebab-case（如
user-info）避免歧义 - 一个
<slot name="xxx">只能接收一个同名v-slot:xxx块；重复命名会覆盖，不会合并
结合作用域插槽传递数据
具名插槽可与作用域插槽结合，让子组件向父组件暴露数据：
立即学习“前端免费学习笔记（深入）”；
- 子组件中：
<slot name="item" :id="item.id" :label="item.name"></slot> - 父组件中：
<template #item="slotProps">{{ slotProps.label }} (ID: {{ slotProps.id }})</template> - 注意：
slotProps是一个对象，包含所有绑定在<slot>上的 prop
注意事项与常见误区
容易混淆的点需要特别留意：
- 原生 HTML 不认识
name属性，<slot name="xxx">在未被 Vue 处理时会直接渲染为空白或报错 - 不要在非 Vue 环境（如纯 HTML 页面或 React 项目）中期待它生效
- Vue 2 使用
slot="xxx"旧语法（已废弃），Vue 3 统一为v-slot:xxx - 动态插槽名可用方括号语法：
<slot :name="currentTab"></slot>，配合v-slot:[currentTab]
