useSlots() 返回插槽对象而非 DOM，需调用 slots.default?.() 获取 VNode 数组；用 !!slots.default 判断插槽是否存在；模板中用 <slot> 渲染，不可手动操作 VNode 或访问父组件变量。
`useSlots` 在 `<script setup>` 中用于获取组件接收到的插槽函数，它不返回真实 DOM，也不直接暴露 HTML 元素，而是返回一个**插槽对象**，每个具名插槽（如 `default`、`header`）对应一个可调用的函数，调用后才得到 VNode 数组。
<p>它适用于需要在逻辑中判断插槽是否存在、遍历插槽内容、或做条件渲染等场景，但不能用来操作真实 DOM。
<H3>怎么获取并使用插槽函数
<p>在 `<script setup>` 中直接调用 `useSlots()`：
<ul>
<li>导入并调用：<font color="red">const slots = useSlots()
<li><font color="red">slots.default 是默认插槽函数，<font color="red">slots.header 是具名插槽函数
<li>调用函数才获得 VNode 数组，例如：<font color="red">slots.default?.() 或 <font color="red">slots.footer?.()
<li>插槽函数可能为 undefined，建议用可选链 <font color="red">?.() 防止报错
<H3>如何判断插槽是否存在
<p>不要用 <font color="red">slots.default !== null 或 <font color="red">slots.header !== undefined 直接比较，而应检查函数是否可调用：
<ul>
<li><font color="red">!!slots.default —— 判断默认插槽是否传入内容
<li><font color="red">!!slots.header —— 判断具名插槽是否被使用
<li>注意：即使父组件写了 <font color="red"><MyComp><template #header>，只要内部没内容，<font color="red">slots.header 仍为 <font color="red">undefined
<H3>怎么在模板中渲染插槽
<p>逻辑判断和内容处理靠 JavaScript，但最终渲染仍需在 `<template>` 中使用 `<slot>` 标签：<p><span>立即学习“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）”；
<ul>
<li>默认插槽：<font color="red"><slot>
<li>具名插槽：<font color="red"><slot name="header">
<li>作用域插槽：<font color="red"><slot name="item" :item="item">，父组件用 <font color="red">v-slot:item="{ item }" 解构
<li>不要试图在 JS 中“手动渲染”VNode——Vue 不鼓励也不支持直接操作 VNode 渲染逻辑
<H3>常见误区提醒
<ul>
<li><font color="red">useSlots() 返回的是函数，不是 DOM 节点，也不是 HTML 字符串
<li><font color="red">slots.default() 返回的是 VNode 数组，不是真实元素引用，无法调用 <font color="red">.offsetHeight 等 DOM 方法
<li>若需操作插槽内容的真实 DOM，请改用 <font color="red">useAttrs 透传 <font color="red">ref 或事件，并配合 <font color="red"><slot v-bind="attrs">
<li>插槽内容在父组件作用域编译，子组件 JS 中无法访问插槽内绑定的变量（如 <font color="red">{{ user.name }} 中的 <font color="red">user 是父组件数据）
</script>
