|
我听到 透传 这个词后，我感觉有那么一点熟悉感，仔细想想后我发现，其实我们前端也一直在使用透传，特别是在做基础封装时。
透传在前端的应用
今天就用一个 Vue基础组件封装 的过程为例，来简单聊聊什么是透传。
相信不少前端er做项目都会用到组件库，是ElementUI还是Ant Design，这都不重要。然后我们又希望在第三方组件库的基础上再做一点点定制。
举个例子， el-button 有个属性是 size ，用于控制按钮组件的尺寸
可以看到，默认size是比较大的。然而我们设计师基于组件库出自己的设计方案时，其实选择的默认按钮尺寸可能恰好对应 ElButton 的 medium 尺寸，或者是其他值。这样一来，如果我不对 el-button 做封装，每个使用 el-button 的地方都要多写一个属性 size ，类似于这样：
，每使用一次 el-button ，我就要写一个 size 属性，好烦啊！
是的，确实很烦，那么怎么解决呢？答案是提供一个编程接口，去改变组件的默认值。有这方面考虑的组件设计者一般会提供一个设置默认值的接口，比如 xxx.setDefault(options) 。那么ElementUI和Ant Design有没有提供这样的能力呢？据我观察好像是没有，其实主要是因为Vue没有一个方便的途径去修改 prop 的 default 属性。但是没有方便的途径并不代表没有途径...
由于本文的主题是 透传 ，所以就不说那个途径（或者说方法）了，有点跑偏了。
网友小王说：“好，那就硬上，封装一个组件！”
好的，马上安排！基本思路是封装一个自定义组件，组件里面再调用 el-button ，并且强行给 el-button 安排上默认属性 size="medium" 。
（编辑：桂林站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
