useslots 是 vue 3 中判断插槽是否存在最直接推荐的方式，通过 !!slots.xxx 检查插槽函数是否为真值即可，无需调用函数；默认插槽用 !!slots.default，具名插槽如 !!slots.header，作用域插槽同理。
在 Vue 3 的 `<script setup>` 中，`useSlots` 是判断插槽内容是否存在最直接、最推荐的方式。它返回一个插槽对象，每个具名插槽（如 <code>header、<code>footer）或默认插槽（<code>default）都对应一个函数，调用该函数才真正生成 VNode 数组；但**判断存在性只需检查该函数是否为真值**，无需调用。</script></p>
<h3>怎么用 useSlots 判断插槽有没有内容</h3>
<p>核心逻辑很简单：插槽函数本身是函数类型，只要父组件传了对应插槽内容，该属性就存在且为函数；否则为 <code>undefined</code>。所以用 <code>!!slots.xxx</code> 就能安全判断。</p>
<ul>
<li>
<strong>默认插槽</strong>：用 <code>!!slots.default</code>
</li>
<li>
<strong>具名插槽</strong>：如 <code>!!slots.header</code>、<code>!!slots.footer</code>
</li>
<li>
<strong>作用域插槽</strong>：同样适用，比如 <code>!!slots.action</code>，即使它带参数（如 <code>:item</code>），函数本身仍存在</li>
</ul>
<h3>常见判断场景与写法</h3>
<p>实际封装组件时，常需根据插槽有无动态渲染结构或 fallback 内容。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8402" title="Vue Composition Analyzer"><img
src="https://img.php.cn/upload/skill/000/000/081/179203693273105.jpg" alt="Vue Composition Analyzer" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill8402" title="Vue Composition Analyzer" class="overflowclass">Vue Composition Analyzer</a>
<p class="overflowclass">分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……</p>
</div>
<a rel="nofollow" href="/xiazai/skill8402" title="Vue Composition Analyzer" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>只在有插槽时才渲染容器：<code><header v-if="!!slots.header"><slot name="header"></slot></header></code>
</li>
<li>插槽优先，无则显示 props 默认值：<code>{{ !!slots.default ? '' : props.placeholder }}</code>（配合 <code><slot>{{ props.placeholder }}</slot></code> 更简洁）</li>
<li>组合多个插槽状态：<code>const hasHeaderOrFooter = !!slots.header || !!slots.footer</code>
</li>
</ul>
<h3>注意几个关键点</h3>
<p>避免踩坑，记住这几点：</p>
<ul>
<li>
<code>useSlots()</code> 返回的是普通对象，不是响应式代理，不能用 <code>watch</code> 监听它的变化（插槽变更会触发组件重新渲染，可直接在模板中用 <code>v-if</code>）</li>
<li>不要写 <code>slots.default()</code> 来判断——这会强制执行插槽函数，可能引发副作用或重复渲染，且空插槽调用也返回空数组，不如 <code>!!slots.default</code> 清晰可靠</li>
<li>服务端渲染（SSR）下，<code>useSlots</code> 在 setup 阶段可用，行为一致，无需额外兼容</li>
</ul>
<h3>配合模板使用的完整示例</h3>
<p>子组件 <code>Card.vue</code>：</p>
<font color="#666"><script setup><br>
import { useSlots } from '<a style="color:#f60; text-decoration:underline;" title= "vue"href="https://m.php.cn/zt/15721.html" target="_blank">vue'<br>
const slots = useSlots()<br>
const hasTitle = !!slots.title<br>
const hasActions = !!slots.actions<br>
</script>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
