一、背景：为什么需要"穿透"？
在 Vue 的组件化开发中，我们经常遇到一个核心矛盾："封装"与"灵活"的平衡。
1. 痛点场景
- 二次封装组件 ：当你基于 Element Plus、Ant Design 等第三方库封装一个
MyInput组件时，你希望父组件传递的placeholder、maxlength等原生属性能直接落到内部的<el-input>上，而不是在MyInput中逐个声明。 - 样式定制 ：在
<style scoped>下，父组件想修改子组件内部的深层样式，默认会被 Vue 的样式隔离阻挡。 - 中间层组件：在多层嵌套的组件中，你希望某些属性或插槽能"跳过"中间层，直接传递给底层组件，避免"逐层传递"的繁琐代码。
2. 透传的定义
组件穿透（Attribute Fallthrough） 是指父组件传递给子组件的属性、事件或内容，被子组件"原封不动"地传递给其内部的子元素或组件，而不需要在中间组件中显式声明或处理。
3. Vue 3 的默认行为
Vue 3 有一个默认机制：单根组件会自动继承父组件的非 props 属性 （如 class、style、id、原生事件）。这既是便利，也是需要控制的源头。
二、属性与事件透传（$attrs）
这是最核心的透传能力，主要依赖 $attrs 对象。
1. 默认透传（单根组件）
如果子组件只有一个根元素，且你没有禁用透传，父组件传递的未声明属性会自动绑定到根元素上。
<!-- 父组件 -->
<MyButton class="btn-large" @click="handleClick" data-test="123" />
<!-- MyButton.vue (子组件) -->
<template>
<button>提交</button>
</template>
<!-- 渲染结果：<button class="btn-large" data-test="123">提交</button> -->注意 ：class 和 style 会智能合并，而非覆盖。
2. 手动控制透传（inheritAttrs: false）
当你不希望属性绑定到根元素，而是绑定到内部特定元素时，需要手动接管。
<!-- MyInput.vue -->
<script setup>
// 关键：禁用自动绑定到根元素
defineOptions({ inheritAttrs: false })
</script>
<template>
<div class="input-wrapper">
<!-- 手动将 $attrs 绑定到内部的 input 元素 -->
<input v-bind="$attrs" />
</div>
</template>原理 ：$attrs 包含了父组件传递的所有未在 defineProps 中声明的属性和事件。
3. 在 <script setup> 中访问透传属性
由于 <script setup> 中没有 this，需使用 useAttrs() 来访问。
import { useAttrs } from 'vue'
const attrs = useAttrs()
console.log(attrs.class) // 访问属性
console.log(attrs.onClick) // 访问事件监听器（注意：Vue 3 中事件名通常以 on 开头，如 onClick）三、插槽透传（Slot Forwarding）
在封装高阶组件（HOC）时，经常需要将父组件的插槽内容原样传递给内部组件。
1. 基础插槽透传
使用 v-for 遍历 $slots，将插槽内容"转发"给内部组件。
<!-- Wrapper.vue (中间组件) -->
<script setup>
import { useSlots } from 'vue'
const slots = useSlots()
</script>
<template>
<div class="wrapper">
<BaseCard>
<!-- 遍历所有插槽，并透传插槽数据 -->
<template v-for="(_, name) in slots" :key="name" #[name]="slotData">
<slot :name="name" v-bind="slotData" />
</template>
</BaseCard>
</div>
</template>2. Vue 3.4+ 的类型安全写法
Vue 3.4 引入了 defineSlots() 宏，用于更好的 TypeScript 支持。
<script setup lang="ts">
import { defineSlots } from 'vue'
// 显式声明插槽及其作用域类型
defineSlots<{
default?: (props: { user: { name: string } }) => any
footer?: () => any
}>()
</script>四、样式穿透（:deep()）
在 <style scoped> 模式下，Vue 会为样式添加 data-v-xxx 属性以实现隔离。要修改子组件内部样式，必须使用深度选择器。
1. 标准写法（Vue 3 推荐）
使用 :deep() 伪类。
<template>
<MyCard class="card-wrapper">
<span>内容</span>
</MyCard>
</template>
<style scoped>
/* 修改 MyCard 内部元素的样式 */
.card-wrapper :deep(.el-card__header) {
background: #f5f5f5;
font-weight: bold;
}
</style>2. 不推荐/已废弃的写法
-
/deep/：Sass 等预处理器语法，Vue 3 不推荐。 -
>>>：原生 CSS 语法，兼容性差。 -
::v-deep ：Vue 2 时代的写法，Vue 3 中作为:deep()的别名存在，建议使用新语法。
五、实战：封装一个支持透传的 Input 组件
假设你要封装一个带标签和错误提示的输入框，但希望保留原生 input 的所有能力。
<!-- MyInput.vue -->
<script setup>
import { useAttrs } from 'vue'
defineOptions({ inheritAttrs: false })
const props = defineProps({
label: String,
error: String
})
const attrs = useAttrs()
</script>
<template>
<div class="my-input">
<label v-if="label">{{ label }}</label>
<!-- 关键：将透传属性全部交给内部的 input -->
<input v-bind="attrs" :class="{ 'is-error': error }" />
<div v-if="error" class="error-msg">{{ error }}</div>
</div>
</template>
<style scoped>
.my-input { margin-bottom: 16px; }
.is-error { border-color: red; }
.error-msg { color: red; font-size: 12px; }
</style>使用示例：
<MyInput
label="用户名"
placeholder="请输入用户名" <!-- 透传给内部 input -->
maxlength="20" <!-- 透传给内部 input -->
@input="handleInput" <!-- 透传给内部 input -->
error="用户名不能为空"
/>六、总结与最佳实践
| 场景 | 技术方案 | 关键点 |
|---|---|---|
| 属性/事件透传 | $attrs + v-bind |
禁用 inheritAttrs，手动绑定到目标元素 |
| 插槽透传 | v-for + $slots |
中间组件不消费插槽，直接转发 |
| 样式穿透 | :deep() |
仅在必要时使用，避免全局污染 |
核心原则：
- 最小化声明 ：不要把所有属性都声明为
props，利用透传减少代码量。 - 明确目标 ：使用
inheritAttrs: false明确属性绑定位置，避免意外绑定到根元素。 - 谨慎穿透样式 ：
:deep()会破坏样式隔离，尽量通过组件 props 或 CSS 变量实现定制。
通过掌握透传，你可以构建出既高度封装又极其灵活的组件库，真正实现"乐高式"开发。