useSlots() 获取插槽内容
最后更新：2026-10-22
useSlots() 获取插槽内容
useSlots() 返回父组件传入的插槽函数集合，用于在脚本里判断“有没有传某个插槽”或手动渲染。
| 分组 | 模板与辅助 |
|---|---|
| 类型 | API |
| 作用域 | 组件内 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
const slots = useSlots()
if (slots.header) { /* 父组件提供了 header 插槽 */ }返回值：插槽函数对象（含 default / 具名插槽）
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
第一个卡片显示父组件标题；第二个显示「默认标题」。💡 要点
💡 提示 判断插槽存在与否是典型用途：有则渲染父内容，无则渲染兜底。
ℹ️ 说明 模板里通常直接用 ，脚本里需要条件判断时才用本函数。
⚠️ 注意 不要把它当响应式数据来依赖（插槽集合在渲染间可能变化）。
🏷️ 相关模板与辅助
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q 和 $slots 的区别？
A 组合式 API 版本，功能一致；两者都返回插槽函数集合。
Q 能调用插槽函数吗？
A 可以（slots.default()），但一般交给模板渲染，手动调用属高级用法。
Q 判断存在性常用在哪？
A 卡片、弹窗、表格这类“可选头部/底部”的组件里做兜底 UI。
