插槽数据透传需动态遍历$slots并用#\[name\]语法绑定，保留作用域参数与响应式引用，配合inheritAttrs: false和v-bind="$attrs"实现属性透传，避免静态声明、额外DOM包裹及scoped样式穿透问题。
插槽数据透传，核心是让父组件定义的插槽内容（含作用域参数）不被中间组件拦截，完整、准确地落到最终子组件上。它不是简单复制，而是保持插槽语义、运行时上下文和响应式行为的一致传递。
透传所有插槽（含 default 和命名插槽）
中间组件不能只写<slot name="header"></slot>这种静态写法，否则会漏掉父组件传来的#default或其他自定义名。必须遍历$slots对象，动态绑定：
- 使用
v-for="(slot, name) in $slots"获取全部插槽名与函数 - 用
#[name]语法动态声明插槽入口 - 内部
<slot :name="name" v-bind="slotProps"/>确保作用域参数原样透出
正确处理作用域插槽参数
如果底层子组件通过<slot :row="item" :index="i"></slot>暴露数据，父组件在顶层使用时依赖这些参数，那么透传层必须保留参数传递链：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 透传组件中
v-bind="slotProps"不可省略，否则父组件解构不到row或index - 不要在透传过程中修改或过滤参数对象，避免破坏响应式引用
- 若子组件传的是
ref或reactive对象，透传后仍保持响应式，无需额外转换
属性透传与插槽透传协同使用
实际封装中，插槽透传常和 attribute 透传配合。比如封装一个<MyTable>，既要转发#header，也要把class、size、@sort等落到内部<el-table>上：
立即学习“前端免费学习笔记（深入）”；
- 设置
inheritAttrs: false禁用自动继承，避免属性错绑到外层容器 - 用
v-bind="$attrs"把非 props 属性直接绑定到底层组件 - 插槽透传与属性透传互不干扰，可共存于同一组件模板中
避免常见陷阱
透传看似简单，但几个细节容易导致功能失效：
- 不要给透传插槽额外包裹无意义 DOM（如多套一层
<div>），可能破坏事件冒泡或 CSS 选择器匹配 -
scoped样式无法穿透到透传后的插槽内容，父组件需用:deep()在最终接收组件的作用域内编写样式 - 不要手动列出插槽名（如只写
header、footer），这会让未来新增的插槽名失效
