Vue插槽默认内容仅在父组件完全未传入任何节点（含空格、换行、注释）时生效；写法为<slot>默认文本</slot>，具名与作用域插槽同理但有约束，常见失效因父组件存在空白节点或漏写<slot>标签。
Vue插槽默认内容不是静态占位符，而是参与真实渲染逻辑的后备节点——它只在父组件**完全未传入任何节点**（包括空格、换行、注释）时才出现。
默认内容怎么写才生效
在子组件模板中，直接把内容写在
-
<slot>暂无内容，请传入信息</slot>—— 最简写法，适用于默认插槽 -
<slot name="header"><h3>默认标题</h3></slot>—— 具名插槽也支持，各自独立 fallback -
<slot v-bind:item="currentItem">暂无数据</slot>—— 作用域插槽可设默认文本，但不能用{{ item }}，否则报错或空白
为什么写了却看不到？常见失效原因
默认内容“不显示”，大概率不是代码写错，而是 Vue 判定“已有内容”：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 父组件写了
<MyComp>\n </MyComp>—— 换行 + 空格 → 被视为两个文本节点 → 默认内容跳过 - 用了
v-show包裹插槽内容 → DOM 节点仍在，assignedNodes()非空 → 不触发 fallback -
v-if="false"包裹 → 节点未创建 →assignedNodes()为空 → 默认内容正常显示 - 子组件漏写
<slot>标签 → 内容被静默丢弃，不是 fallback 失效，是根本没接收入口
具名与作用域插槽的特殊处理
它们的默认内容机制一致，但有关键限制：
立即学习“前端免费学习笔记（深入）”；
- 具名插槽必须用静态
name属性：<slot name="footer">默认按钮</slot>✅；<slot :name="footerName"></slot>❌（动态绑定不支持 fallback） - 作用域插槽默认内容无法访问作用域变量，但可用
v-if="$slots.item"配合普通元素做条件渲染，更可控 - 多个插槽共存时互不影响：header 有内容、footer 为空 → 只渲染 footer 的默认内容
如何验证是否真“没传内容”
别靠眼睛看页面空不空，要查真实分发状态：
- 在子组件
mounted中打印：this.$refs.mySlot?.assignedNodes()（需给<slot ref="mySlot">加 ref） - Chrome DevTools 中右键 slot 元素 → “Break on” → “attribute modifications”，观察是否被动态修改干扰匹配
- uni-app 的 NVue 模式下不支持具名 slot，所有
name属性会被忽略，导致本该回退的插槽直接空白
