具名插槽的核心作用是让父组件能把不同内容准确投递到子组件中多个预定义的位置，比如 header、body、footer——不靠顺序，只靠名字匹配。

具名插槽的核心作用是让父组件能把不同内容，准确投递到子组件中多个预定义的位置，比如 header、body、footer —— 不靠顺序，只靠名字匹配。

子组件里声明带 name 的 slot

在子组件模板中，用 <slot name="xxx"></slot> 标出每个可定制区域。name 值必须是合法标识符；含短横线（如 user-info）要加引号：<slot name="user-info"></slot>。

• 一个子组件可定义多个具名插槽，互不干扰
• 可以同时保留一个无 name 的默认插槽，接收未指定位置的内容
• 未被父组件匹配的具名插槽会留空，不会自动 fallback 到默认插槽

父组件用 v-slot:xxx 或 #xxx 投递内容

在使用子组件时，用 <template v-slot:xxx>...</template> 或简写 <template #xxx>...</template> 把内容绑定到对应名称。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 每个 #header 只渲染进子组件里 name="header" 的那个 slot
• 简写语法 #xxx 和完整写法 v-slot:xxx 不能混用在同一组件实例中
• Vue 3 要求 v-slot 必须写在子组件的直接子元素上，否则会被忽略

结合作用域数据做动态内容分发

当子组件需要把内部数据（如列表项、状态）传给插槽内容时，可在具名 slot 上绑定 prop：<slot name="item" :user="user" :index="index"></slot>。

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

• 父组件用解构语法接收：<template #item="{ user, index }">{{ user.name }} ({{ index }})</template>
• 多个具名作用域插槽可各自解构不同字段，彼此独立
• 动态插槽名可用方括号：v-slot:[dynamicName]，适合循环生成场景

常见易错点提醒

命名和语法细节容易导致内容不显示，需特别注意：

• name 值含空格或特殊字符（如 my slot）会报错，必须用合法标识符或引号包裹
• v-slot 不能写在普通 div 或过渡标签上，必须紧贴子组件标签
• 没写 v-slot:default 时，父组件中直接写在标签内的内容才进默认插槽；写了就只认显式声明的
• Vue 2 中可用 slot="xxx" 旧语法，但 Vue 3 已废弃，统一用 v-slot