透传是什么意思(华为蓝牙耳机透传是什么意思)

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

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

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

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

透传在前端的应用

今天就用一个 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” 。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

看图可能会更好理解!

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

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

总结

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

本文转载网络分享,文章版权归作者所有:

免责声明:部分文章是来自大数据AI进行生成,内容仅供学习参考,不承认相关法律责任。如果您发现本站中有涉嫌抄袭或不准确地方的内容,请发送邮件至:glmpjh@163.com进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。

(0)
上一篇 2023年9月18日 上午3:21
下一篇 2023年9月18日 上午3:27

相关推荐

  • 深圳市龙岗区布吉街道文理学校地址,深圳市龙岗区布吉中学高中部怎么样?

    也不一定全中国最差,但不可否认的是,布吉中学是龙岗区最差的公办高中,师资力量比民办高中还差,布吉中学高中部比爱义学校,龙岭差,初中部师资力量还可以。所谓的师资力量差,就是你的老师不务正业,上课不讲课的

    问答 2023年6月21日
  • 2025沈阳职业技术学院怎么样

    沈阳职业技术学院全面解析:办学实力、优势专业与报考指南沈阳职业技术学院(简称\”沈职院\”)是辽宁省重点高职院校,作为国家示范性高等职业院校,在装备制造类专业领域享有盛誉。以下从多个维度为您全面解析这所院校。院校概况沈阳职业技术学院创建于1

    问答 2025年4月28日
  • 2025年魔学院怎么样

    根据2025年的最新信息,魔学院(企业培训SaaS平台)的综合情况如下,结合办学层次、排名、专业、口碑等维度整理:魔学院是摩博科技旗下的企业数字化培训平台,定位为“平台+生态+服务”一体化解决方案提供商,主要服务于企业客户(如格力、联想等1

    问答 2025年5月15日
  • 吃什么补肝养肝最有效(吃什么补肝养肝最有效窍门)

    肝脏是人体的重要内脏器官之一,其功能十分复杂,主要包括解毒、储能、代谢、合成和分泌等多方面的综合功能。因此,肝脏的健康与人体的健康密切相关。如果长期不注意肝脏的保健,就会导致肝脏的…

    问答 2023年7月27日
  • 内江师范学院怎么样好不好,可靠吗?

    1、内江师范学院怎么样内江师范学院是四川省人民政府举办四川省教育厅主管的全日制普通本科高等院校。学校地处“成渝地区双城经济圈”主轴重要节点城市——四川省内江市。

    问答 2024年3月24日
  • 自学中医如何取得中医医师资格证,自学中医如何取得资格证?自学中医怎么考证书

    自学中医考证,有以下五条路,有两条路已取消。第一条路:参加自学考试。自学中医只有在1998年4月份之前参加中医学自学考试,并取得一门以上单科合格证,并在2005年12月之前取得自学考试中医学专业,大专

    问答 2023年6月3日
  • 猫咪晕车了怎么缓解,猫咪晕车了怎么缓解(有效的缓解晕车的方法)

    问猫咪晕车了怎么缓解?这是一个常见的问题,许多猫咪在长途旅行或乘坐汽车时都会出现晕车现象。猫咪晕车的原因是因为它们的内耳无法适应车辆的晃动,导致晕眩、呕吐等不适症状。下面是一些有效的缓解晕车的方法1.

    问答 2024年1月2日
  • tank是什么意思(摊k是什么意思)

    Tank 是一个英文单词,其意思是箱式或圆筒形的用来储存液体或气体的器皿。它可以是大型的金属容器,也可以是小型的塑料瓶。Tank 通常用于工业、农业和军事领域,例如储存石油,农药,…

    问答 2023年7月6日
  • 2025年浙大竺可桢学院怎么样

    以下是关于浙江大学竺可桢学院(2025年)的综合分析,结合办学层次、排名、专业、分数线等关键信息,并附表格整理:竺可桢学院是浙江大学的荣誉学院,成立于2000年,前身为1984年设立的工科混合班,以浙大老校长竺可桢命名。学院定位为拔尖创新人

    问答 2025年5月16日
  • bolt是什么意思(bolt打车软件)

    Bolt是一个多义词,其含义取决于上下文和使用场合。以下是Bolt可能的含义: 1. 螺栓:螺栓是一种用于连接两个或多个物体的紧固装置。它通常由一个螺杆和一个用于旋转的六角头组成,…

    问答 2023年6月24日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注