vue插槽默认值是动态参与渲染的后备内容，仅在父组件未传入任何节点（包括空格、注释）时生效；具名与作用域插槽同理，但作用域插槽默认内容不可访问作用域变量。
Vue.js 中插槽的默认值和后备内容不是“写死”的占位符，而是真正参与渲染逻辑的可执行内容。关键在于理解 v-slot 的作用域、slot 元素的 fallback 行为，以及如何在父组件未提供内容时优雅降级。
插槽默认内容只在没有传入内容时渲染
在子组件模板中，直接写在 <slot></slot> 标签内的内容即为后备内容（fallback content），它仅当父组件未通过 v-slot 或具名插槽传递任何节点时才生效。
- 如果父组件写了
<mycomponent></mycomponent>（空标签），后备内容会显示 - 如果父组件写了
<mycomponent><template>自定义</template></mycomponent>，后备内容被完全忽略 - 即使父组件传入了空格、换行或注释节点，Vue 也会视作“有内容”，后备内容不触发
具名插槽与作用域插槽的默认值写法一致
具名插槽（如 #header）和作用域插槽（如 #item="{ data }"）同样支持后备内容，但需注意：作用域插槽的默认内容无法访问作用域变量，因为变量只在父组件传入插槽内容时才被绑定。
- 正确写法：
<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计算属性，供父组件或内部逻辑判断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
