插槽不能直接响应ref或事件，因为其内容由父组件提供且属于父组件作用域；需通过useAttrs获取未声明属性并用v-bind="attrs"透传到插槽内容的单根节点上。
插槽本身不接收属性，但父组件传给子组件的未声明属性（比如 ref、@click、id、data-test）可以通过 useAttrs 获取，并透传到插槽内容的根节点上——这正是解决“未识别插槽属性”的核心方式。
为什么插槽不能直接响应 ref 或事件？
插槽内容由父组件提供，渲染后属于父组件作用域；子组件内部无法直接给它加 ref 或绑定事件。Vue 不允许在 <slot></slot> 标签上写 ref 或 @click，因为 <slot></slot> 只是占位符，不是真实 DOM 节点。
- 插槽返回的是 VNode 数组，不是 DOM 元素，所以不能直接操作真实节点
- useSlots() 只能读取或调用插槽函数，不能修改其行为或挂载属性
- 真正起作用的是：把父组件传来的 attrs，手动“挂”到插槽内容的最外层元素上
用 useAttrs 透传属性到插槽内容
关键是在子组件模板中，把 v-bind="attrs" 写在 <slot></slot> 标签上，而不是根容器上：
<template>
<div class="wrapper">
<header><slot name="header"></slot></header>
<main><slot v-bind="attrs"></slot></main>
<footer><slot name="footer"></slot></footer>
</div>
</template>
- 这样，父组件传入的
ref="btnRef"、@click="handleClick"、data-id="1"就会自动应用到插槽内容的最外层标签（如<button></button>或<div>） <li>如果插槽内容是 <code><button>提交</button>，透传后实际渲染为<button ref="btnRef" data-id="1">提交</button> - 多根节点插槽（如
<span></span><em></em>）不支持透传，必须确保插槽内容本身是单根结构
需要过滤或定制透传时怎么做？
有时你不希望所有 attrs 都透传（比如避免透传 ref 到错误位置，或排除 key、class），可以用解构 + 剩余属性：
立即学习“前端免费学习笔记（深入）”；
<script setup>
import { useAttrs } from 'vue'
const attrs = useAttrs()
const { ref, key, class: cls, ...rest } = attrs
</script>
<template>
<div class="card" :class="cls">
<slot v-bind="rest"></slot>
</div>
</template>
-
class单独提取出来，和组件自身 class 合并使用（Vue 会自动合并） -
ref和key被显式剔除，防止干扰插槽内部逻辑 - 其余属性通过
rest透传，保持灵活性
常见问题与验证方式
透传是否生效，可通过以下方式快速确认：
- 父组件中用
ref绑定插槽内容，然后在onMounted中打印：console.log(btnRef.value)—— 若输出真实 DOM 元素，说明成功 - 给插槽内容加
@click，观察点击是否触发对应 handler，且子组件内部逻辑不拦截 - 检查浏览器开发者工具中插槽渲染出的元素，看是否有预期的
data-*、aria-*等属性 - 若发现属性没出现，先确认该属性是否已被 props 声明（如
size已定义，则不会出现在attrs中）
