默认插槽兜底是直接在<slot>标签内写内容，父组件未传任何内容时显示该兜底内容；具名插槽可各自独立设置兜底；作用域插槽兜底不可引用绑定数据；兜底需确保<slot>标签始终参与编译。
默认插槽兜底：写在标签里就行
子组件模板中，直接把备用文案或结构写进 <slot> 标签内部：
<template>
<div class="list">
<slot>暂无数据</slot>
</div>
</template>
父组件不传内容：<MyList></MyList> → 显示“暂无数据”
父组件传了内容：<MyList><p>有数据</p></MyList> → “暂无数据”完全不出现
具名插槽也支持各自独立兜底
每个具名插槽都可以设自己的默认内容，互不影响：
<slot name="header">默认标题</slot><slot name="footer"><button>操作按钮</button></slot>- 父组件只覆盖 header：
<MyCard><template #header>新标题</template></MyCard>→ footer 仍显示默认按钮
作用域插槽兜底要避开变量引用
作用域插槽的默认内容无法访问绑定的数据，否则会报错或为空：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- ✅ 正确：
<slot v-bind:user="userInfo">暂无用户信息</slot> - ❌ 错误：
<slot v-bind:user="userInfo">{{ user.name }}</slot>（user 在默认内容中不可用） - 如需动态判断，改用
v-if="$slots.default === undefined"包裹备用结构
别让外层条件干扰兜底逻辑
兜底生效的前提是 <slot> 标签本身被求值。如果把它包在 v-if 里，就可能彻底消失：
立即学习“前端免费学习笔记（深入）”；
- ⚠️ 不推荐：
<div v-if="show"><slot>兜底文案</slot></div>（show 为 false 时，兜底也不见） - ✅ 推荐：把条件移到 slot 内部或用
v-show控制显隐，确保 slot 始终参与编译
