具名插槽是Vue.js中通过name属性精准分发内容的机制，子组件用<slot name="xxx">声明，父组件用v-slot:xxx或#xxx指定内容；支持多插槽、作用域数据传递及动态名称，需注意命名规范与语法限制。

具名插槽（Named Slots）是 Vue.js 中实现组件内容精准分发的关键机制，它让父组件能将不同内容“投递”到子组件中预定义的多个插槽位置，从而提升组件复用性与结构清晰度。

什么是具名插槽？

默认插槽只能接收一份匿名内容，而具名插槽通过 name 属性标识不同插槽位置。子组件用 <slot name="xxx"></slot> 声明，父组件用 v-slot:xxx（或简写 #xxx）指定内容归属。

• 子组件内可定义多个具名插槽，如 header、footer、actions
• 父组件中每个 v-slot:xxx 只会渲染到对应名称的插槽，互不干扰
• 未匹配的具名内容不会被渲染，也不会回退到默认插槽（除非显式使用 v-slot:default）

基础用法：三栏布局示例

假设封装一个卡片组件 BaseCard.vue，支持自定义头部、主体和操作区：

子组件（BaseCard.vue）：

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

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

<template>
  <div class="card">
    <header class="card-header"><slot name="header"></slot></header>
    <main class="card-body"><slot name="body"></slot></main>
    <footer class="card-footer"><slot name="footer"></slot></footer>
  </div>
</template>

父组件中使用：

<BaseCard>
  <template #header><h2>用户信息</h2></template>
  <template #body><p>姓名：张三</p><p>邮箱：zhang@example.com</p></template>
  <template #footer><button @click="edit">编辑</button></template>
</BaseCard>

作用域插槽 + 具名插槽：带数据的内容分发

当子组件需要向插槽传递数据（如列表项、状态），可结合作用域插槽。具名插槽同样支持接收 prop：

• 子组件中：<slot name="item" :user="user" :index="index"></slot>
• 父组件中：<template #item="{ user, index }">{{ index + 1 }}. {{ user.name }}</template>
• 多个具名作用域插槽可各自解构不同数据，互不影响

注意事项与常见误区

使用具名插槽时需注意几个关键点：

• name 值必须是合法标识符：避免空格、特殊符号；若含短横线（如 user-info），需用引号包裹：v-slot:"user-info"
• 不能混用简写与完整写法：同一组件内不要对同一个插槽既用 #header 又用 v-slot:header
• 动态插槽名需用方括号语法：v-slot:[dynamicName]，常用于循环生成插槽
• Vue 3 中 v-slot 只能用在直接子元素上（即必须紧贴组件标签），否则会被忽略