一个透传技巧，治好了我的重度代码洁癖，web开发入门

本文链接：https://blog.csdn.net/2401_84091110/article/details/137388331

本文介绍了前端开发中如何利用Vue的`inheritAttrs`选项和`$attrs`实现属性透传，解决组件封装时的代码冗余问题，提高组件的扩展性和可维护性。通过一个具体的Vue基础组件封装示例，阐述了透传在处理未定义属性和事件监听时的作用，帮助开发者理解并应用这一技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原创@前端司南

背景介绍

====

透传是一个通讯层面的概念，指的是在通讯中不管传输的业务内容如何，只负责将传输的内容由源地址传输到目的地址，而不对业务数据内容做任何改变。

其实透传这个概念，我最早是从上面一个领导那里听到的，由于他是电气工程师出身，而硬件通讯这块用到透传还是挺多的。

当我听到透传这个词后，我感觉有那么一点熟悉感，仔细想想后我发现，其实我们前端也一直在使用透传，特别是在做基础封装时。

透传在前端的应用

========

今天就用一个Vue基础组件封装的过程为例，来简单聊聊什么是透传。

相信不少前端er做项目都会用到组件库，是ElementUI还是Ant Design，这都不重要。然后我们又希望在第三方组件库的基础上再做一点点定制。

举个例子，el-button有个属性是size，用于控制按钮组件的尺寸。

| 属性 | 说明 | 类型 | 可选值 | 默认值 |

| — | — | — | — | — |

可以看到，默认size是比较大的。然而我们设计师基于组件库出自己的设计方案时，其实选择的默认按钮尺寸可能恰好对应ElButton的medium尺寸，或者是其他值。这样一来，如果我不对el-button做封装，每个使用el-button的地方都要多写一个属性size，类似于这样：

// pageA.vue

按钮1

按钮2

// pageB.vue

按钮3

按钮4

很明显，每使用一次el-button，我就要写一个size属性，好烦啊！

是的，确实很烦，那么怎么解决呢？答案是提供一个编程接口，去改变组件的默认值。有这方面考虑的组件设计者一般会提供一个设置默认值的接口，比如xxx.setDefault(options)。那么ElementUI和Ant Design有没有提供这样的能力呢？据我观察好像是没有，其实主要是因为Vue没有一个方便的途径去修改prop的default属性。但是没有方便的途径并不代表没有途径…

由于本文的主题是透传，所以就不说那个途径（或者说方法）了，有点跑偏了。

网友小王说：“好，那就硬上，封装一个组件！”

好的，马上安排！基本思路是封装一个自定义组件，组件里面再调用el-button，并且强行给el-button安排上默认属性size="medium"。

聪明的读者一看就发现了，这个组件问题很大，除了size属性，其他属性和事件怎么处理完全没

小王说：“没事，您需要什么？我给安排上！”

于是，这个组件最后就慢慢变成了：

<el-button

:size=“size”

:type=“type”

:disabled=“disabled”

@click=“onClick”

看起来有点糟心，这组件甚至会更冗余，更复杂，因为我这里只加了3个prop和1个event。对于稍微复杂一点的组件来说，prop加上event一共几十个是随随便便的吧！你适配得过来吗？而且，不少人还有代码洁癖吧，这简直受不了！

淡定淡定！这当然是有办法解决的。强如框架的设计者尤小右自然早已想到了这个场景，所以你应该在Vue官网文档中关注到inheritAttrs[1]。

如何理解inheritAttrs（默认值为true）这个选项呢？我们知道，一个组件如果要接受父组件传来的属性，是需要先在props里面预定义好的。比如前面的例子，我在MyButton预定义了3个属性，分别是size, type, disabled，意思是MyButton这里只接受3个prop。

那么假设父组件传了4个或者更多prop过来呢，会怎么样？看下面这个例子：

<my-button

type=“success”

disabled

round

native-type=“submit”