!!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 #header></template>,子组件中就检查 slots.header:
使用 `@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 —— 它不是响应式对象,变化不会触发更新

















