Vue插槽默认内容是组件未接收插槽内容时自动渲染的备用内容，通过在标签内编写实现，具名插槽和作用域插槽同样支持，默认内容仅在slot标签被求值且无父组件传入时生效。

Vue插槽默认内容，就是在组件没传入任何插槽内容时，自动渲染的一段备用内容。它不是“兜底文案”那么简单，而是组件设计中提升健壮性和用户体验的关键细节。

用 slot 标签内部写内容即可设置默认值

在子组件模板中，直接在 <slot></slot> 标签内写内容，这部分就会作为默认渲染内容：

父组件不传插槽时，用户会看到“这里是一张空卡片，请传入内容”；一旦传了，比如：

  

我才是真正的卡片内容

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

那默认文字就被完全替换了——Vue 会自动移除 slot 内部的默认内容，只渲染传入的内容。

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

多个插槽也支持各自默认内容

具名插槽和作用域插槽同样可以设默认内容，只需在对应 <slot name="xxx"></slot> 或 <slot v-bind="data"></slot> 标签内部填写内容即可：

• <slot name="header">默认标题</slot>
• <slot name="footer"><button>默认操作按钮</button></slot>
• <slot v-bind:user="userInfo">暂无用户信息</slot>（作用域插槽默认内容中不能访问 user，但能正常渲染文本）

注意：v-if 会影响默认内容的显示逻辑

如果在 <slot></slot> 外层加了条件渲染，比如：

  这段默认内容可能根本不会出现

那即使没传插槽内容，只要 showSlot 是 false，默认内容也不会渲染。真正“保底”的前提是 slot 标签本身被求值——所以默认内容应放在 slot 标签内部，且 slot 所在的外层结构需确保常驻或按需可控。

进阶技巧：用 v-slot:default 显式覆盖默认插槽

在父组件中，你也可以显式使用 v-slot:default 来传内容，这在需要和其他具名插槽共存时很实用：

  
  
  

此时子组件中的 <slot>默认文案</slot> 依然存在，但因父组件显式提供了 #default，所以默认文案不会生效——它始终是“被替代优先”的。