在 vue 3 中，推荐使用 useslots() 获取 slots 对象并判断插槽属性是否为真值来检测父组件是否传递了某插槽；如 !!slots.default 判断默认插槽，!!slots.header 判断具名插槽，中划线命名需用方括号访问；模板中应配合 v-if 控制插槽区域渲染，避免空节点。
在 Vue 3 中，判断父组件是否传递了某个插槽，最直接、推荐的方式是通过 useSlots() 获取插槽对象，再检查对应插槽名是否存在（即是否为真值）。
用 useSlots() 检查插槽存在性
在 <script setup></script> 中调用 useSlots()，返回一个 slots 对象，其每个属性（如 default、header、footer）对应一个插槽函数。如果父组件未提供该插槽内容，对应属性值为 undefined；提供了则为一个返回 VNode 数组的函数。
-
!!slots.default→ 判断是否有默认插槽内容 -
!!slots.header→ 判断是否传入了具名插槽header -
!!slots['my-slot']→ 支持中划线命名的插槽（需用方括号访问）
在模板中条件渲染插槽区域
利用上述判断结果，可控制插槽容器是否渲染，避免空 DOM 占位或样式错乱：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章