Vue插槽默认值是动态参与渲染的后备内容，仅在父组件未传入任何节点（包括空格、注释）时生效；具名与作用域插槽同理，但作用域插槽默认内容不可访问作用域变量。

Vue.js 中插槽的默认值和后备内容不是“写死”的占位符，而是真正参与渲染逻辑的可执行内容。关键在于理解 v-slot 的作用域、slot 元素的 fallback 行为，以及如何在父组件未提供内容时优雅降级。

插槽默认内容只在没有传入内容时渲染

在子组件模板中，直接写在 <slot></slot> 标签内的内容即为后备内容（fallback content），它仅当父组件未通过 v-slot 或具名插槽传递任何节点时才生效。

• 如果父组件写了 <MyComponent></MyComponent>（空标签），后备内容会显示
• 如果父组件写了 <MyComponent> <template #default>自定义</template> </MyComponent>，后备内容被完全忽略
• 即使父组件传入了空格、换行或注释节点，Vue 也会视作“有内容”，后备内容不触发

具名插槽与作用域插槽的默认值写法一致

具名插槽（如 #header）和作用域插槽（如 #item="{ data }"）同样支持后备内容，但需注意：作用域插槽的默认内容无法访问作用域变量，因为变量只在父组件传入插槽内容时才被绑定。

vue-component-analyzer

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

下载

• 正确写法：<slot name="header">默认头部</slot>
• 作用域插槽默认内容中不能用 {{ data }}，否则报错或渲染为空；可写纯静态文本或使用 v-if 判断是否传入作用域
• 若需动态 fallback，推荐在子组件内用 v-if="$slots.header" 控制显隐，再配合普通元素实现条件渲染

避免默认值被意外覆盖的常见陷阱

后备内容失效往往不是语法错误，而是结构或编译时机导致的误解。

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

• <MyComponent><p></p></MyComponent>：一个空段落仍算作插槽内容，后备不显示
• 使用 <template v-slot:default></template> 显式声明空插槽，也会屏蔽默认值
• 在 setup() 中通过 slots 对象手动渲染插槽时，必须显式判断 slots.default?.() 是否存在，否则默认内容不会自动回退

高级技巧：用插槽函数 + 条件逻辑实现智能 fallback

当需要根据上下文动态决定是否启用默认内容时，可在子组件中结合 slots 和响应式状态封装逻辑。

• 例如：只有当 loading 为 false 且无插槽内容时，才显示“暂无数据”
• 模板中写：<slot><div v-if="!loading">暂无数据</div></slot>
• 更灵活的方式是导出一个 hasDefaultSlot 计算属性，供父组件或内部逻辑判断