!!slots.xxx 是判断父组件是否传入指定插槽的最简洁方式：默认插槽用 !!slots.default，具名插槽如 header 用 !!slots.header，作用域插槽同理；禁止直接调用 slots.xxx() 或用 object.keys 判断。
直接用 !!slots.xxx 就能判断父组件是否传入了指定插槽，这是最简洁、最常用的方式。
判断默认插槽是否存在
默认插槽对应 slots.default，它是一个函数，有内容时返回 VNode 数组，没传则返回 undefined：
- 写法：
const slots = useSlots()，然后if (slots.default)或更稳妥地写if (!!slots.default) - 注意：不能写
if (slots.default())，因为未传插槽时调用会报错；必须先判空再调用 - 常见用途：控制是否渲染包裹容器或占位提示
判断具名插槽是否存在
比如父组件用了 <template></template>，子组件中就检查 slots.header：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 写法：
if (slots.header)或if (slots.header !== undefined) - 推荐用
!!slots.header，语义清晰且兼容性好 - 可配合 v-if 在模板中条件渲染：
<header v-if="slots.header"><slot name="header"></slot></header>
判断作用域插槽是否被使用
作用域插槽（如 <slot name="item" :item="item"></slot>）的判断方式完全一样：
-
if (slots.item)表示父组件写了v-slot:item，哪怕内容为空也视为已传入 - 不依赖作用域参数是否存在，只看插槽函数本身是否被定义
- 不需要提前调用
slots.item()，避免无谓执行和潜在错误
不建议的写法
这些方式容易出错或不必要：
- 不用
Object.keys(slots).includes('footer')—— slots 是响应式代理封装的对象，key 枚举不可靠 - 避免
slots.footer?.()直接调用再判断长度 —— 多余执行且无法区分“传了空内容”和“根本没传” - 不要在 setup 里对 slots 做 watch —— 它不是响应式对象，变化不会触发更新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
