文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue 这个透传技巧,治好了我的重度代码洁癖

2024-12-02 10:33

关注

 背景介绍

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

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

对于透传,我感觉有那么一点熟悉感,仔细想想后我发现,其实我们前端也一直在使用透传,特别是在做基础封装时。

透传在前端的应用

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

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

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

属性 说明 类型 可选值 默认值
size 尺寸 String medium / small / mini -


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

  1. // pageA.vue  
  2. <el-button size="medium">按钮1el-button>  
  3. <el-button size="medium">按钮2el-button>  
  4. // pageB.vue  
  5. <el-button size="medium">按钮3el-button>  
  6. <el-button size="medium">按钮4el-button> 

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

是的,确实很烦,那么怎么解决呢?答案是提供一个编程接口,去改变组件的默认值。有这方面考虑的组件设计者一般会提供一个设置默认值的接口,比如xxx.setDefault(options)。

那么ElementUI和Ant Design有没有提供这样的能力呢?据我观察好像是没有,其实主要是因为Vue没有一个方便的途径去修改prop的default属性。但是没有方便的途径并不代表没有途径...

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

网友小王说:“好,那就硬上,封装一个组件!”

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

  1. <template>  
  2.     <el-button :size="size">  
  3.         <slot />  
  4.     el-button>  
  5. template>  
  6. <script>  
  7. export default {  
  8.     name: "MyButton",  
  9.     props: {  
  10.         size: {  
  11.             type: String,  
  12.             default: 'medium'  
  13.         }  
  14.     }  
  15.  
  16. script> 

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

小王说:“没事,您需要什么?我给安排上!”

于是,这个组件最后就慢慢变成了: 

  1. <template>  
  2.     <el-button  
  3.         :size="size"  
  4.         :type="type"  
  5.         :disabled="disabled"  
  6.         @click="onClick"  
  7.     >  
  8.         <slot />  
  9.     el-button>  
  10. template>  
  11. <script>  
  12. export default {  
  13.     name: "MyButton", 
  14.     props: {  
  15.         size: {  
  16.             type: String,  
  17.             default: "medium",  
  18.         },  
  19.         type: {  
  20.             type: String,  
  21.             default: "primary",  
  22.         },  
  23.         disabled: Boolean,  
  24.     },  
  25.     methods: {  
  26.         onClick() {  
  27.             this.$emit("click");  
  28.         },  
  29.     },  
  30. };  
  31. script> 

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

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

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

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

  1. <template>  
  2.     <my-button  
  3.         type="success"  
  4.         disabled  
  5.         round  
  6.         native-type="submit"  
  7.     >测试my-button>  
  8. template> 

实际上,round和autofocus都不是MyButton组件支持的prop,所以反映到HTML上是这么一个效果:

作为使用者,我们应该是希望round和native-type="submit"能够传到el-button,产生应有的效果。然而,round和native-type="submit"仅仅是挂在了根元素的attribute上,并没有真正起到应有的作用!

PS:举个例子,round属性作用到el-button能让button带一个is-round的class,从而产生圆角效果!

也就是说,inheritAttrs的作用是:使那些没有在props中定义的属性,直接以attribute的形式作用在组件的根元素上!

那么round和native-type="submit"如何透传下去呢?

首先,不能让那些未被props标识的属性直接落到根元素上,所以需要设置inheritAttrs为false。

然后,要获取到那些未被props标识的属性,并直接绑定到el-button。恰好,Vue提供了$attrs[2]用于获取这些属性,而v-bind本身就能绑定一个对象,这是容易被我们忽略的!

处理完属性透传,接下来我们还要处理事件,类似于$attrs,$listeners也能把父组件中对子组件的事件监听全部拿到,这样我们就能用一个v-on把这些来自于父组件的事件监听传递到下一级组件。

看图可能会更好理解!

相当于MyButton是一个不赚差价的中间商,直接透传消息!直观上看,组件代码量有一个明显的减少,更重要的是扩展性和可维护性变得更强! 

  1. <template>  
  2.     <el-button  
  3.         v-bind="customizedAttrs"  
  4.         v-on="$listeners"  
  5.     >  
  6.         <slot />  
  7.     el-button>  
  8. template>  
  9. <script>  
  10. export default {  
  11.     name: "MyButton",inheritAttrs:false,  
  12.     props: {  
  13.         size: {  
  14.             type: String, 
  15.             default: "medium",  
  16.         },  
  17.     },  
  18.     computed: {  
  19.         customizedAttrs() {  
  20.             return {  
  21.                 size: "medium",  
  22.                 // 支持传过来的size覆盖默认的size  
  23.                 ...this.$attrs,  
  24.             };  
  25.         },  
  26.     },  
  27. };  
  28. script> 

对于调用者来说,使用体验是完全没有被影响的,他的感觉就好像仍然在直接使用el-button,属性传递和事件监听的使用体验都没有任何变化! 

  1. <template>  
  2.     <my-button  
  3.         type="success"  
  4.         round  
  5.         autofocus  
  6.         @click="handleClick"  
  7.     />  
  8. template> 

总结

结合inheritAttrs,v-bind以及v-on,我们就实现了一个支持透传的基础组件!本文是以Button组件为例,做的关于透传的入门介绍。实际上,透传的应用范围远远不止Button组件,利用透传的技巧,我们能做更多漂亮的事情!现在,你的代码洁癖还好吗? 

 

来源:前端大全内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯