Vue插槽默认内容设置方法及组件保底技巧

Vue插槽默认内容是提升组件健壮性与用户体验的关键设计：它并非简单的兜底文案，而是当父组件未传入任何插槽内容时，自动渲染的备用内容，通过在``标签内部直接编写文本或模板即可轻松实现；该机制同时支持具名插槽和作用域插槽，且默认内容仅在``标签被正常求值（即外层结构未被`v-if`等条件阻止渲染）时生效，确保真正“保底”；更进一步，父组件还可通过`v-slot:default`显式覆盖默认行为，灵活适配复杂插槽组合场景——掌握这一细节，让你的Vue组件既可靠又优雅。

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

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

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

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

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

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

具名插槽和作用域插槽同样可以设默认内容，只需在对应 或 标签内部填写内容即可：

• 默认标题
• 默认操作按钮
• 暂无用户信息（作用域插槽默认内容中不能访问 user，但能正常渲染文本）

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

如果在 外层加了条件渲染，比如：

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

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

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

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

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Vue插槽默认内容设置方法及组件保底技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。