默认插槽的后备内容直接写在标签内,仅当父组件未传入内容时生效,支持文本、html、组件及动态绑定,但仅作用于无name属性的默认插槽。

直接在 <slot></slot> 标签内部写内容,就是最简单有效的默认占位方式。它不是额外配置,而是插槽语法本身支持的后备机制。
默认内容怎么写?
在子组件模板中,把想作为保底的文字、HTML 或内联结构直接放进 <slot></slot> 标签里:
<slot>暂无内容,请稍后再试</slot><slot><p class="empty">这里还没有数据</p></slot>-
<slot><loading></loading></slot>(甚至可放组件)
它什么时候生效?
仅当父组件调用该子组件时,标签内部完全为空,才会显示 slot 里的默认内容:
-
<mycard></mycard>→ 显示“暂无内容……” -
<mycard></mycard>→ 同样显示默认内容(空标签等价于未传) -
<mycard><p>我有内容</p></mycard>→ 默认内容被完全替换,不显示
注意事项
默认内容只作用于**默认插槽**(即没加 name 或 v-slot 的那个)。具名插槽和作用域插槽也支持默认内容,但需显式写出对应名称:
- 具名插槽:
<slot name="footer">底部默认文字</slot> - 作用域插槽:
<slot name="item" :row="row">无数据时的占位行</slot>
别把它当成样式兜底
默认内容不是 UI fallback(比如图片加载失败的 alt),而是一段真实参与渲染的模板。它会继承父作用域的样式,也能响应 props 变化——只要逻辑写在 slot 内部,它就具备动态能力。例如:









