组件库源码中这些写法你掌握了吗?(下)

简介: 前沿:这几年,前端的组件库的演变迅速,社区脱颖而出不少优秀的开源组件库,包括element-ui、Ant design、IView等等,这些开源组件库源码中其实有很多值得我们学习的地方,无论是设计思路,代码风格等等,可以通过参考源码中一些写法,引用到我们平时的项目中去

2.Mixin(混入)


Mixin相信大家不陌生,mixin提供了一种非常灵活的方式,可以用来分发Vue组件中的可复用功能,借助Mixin多个组件可以共享数据和方法。同时引入mixin的组件,mixin中的方法和属性也就并入到该组件中,可以直接使用。钩子函数也将会在两个都被调用(Mixin中的钩子会先执行)


微信截图_20220514081713.png


微信截图_20220514081724.png


2.1 dispath 和 broadcast(Iview & element)


Vue新版本中去掉了broadcast和dispatch的方法,分别是用来作:事件广播 和 事件派发的要。而后来 element ui 和 iview 中对 broadcast 和 dispatch 方法进行了重写,并通过 mixin 的方式植入到每个组件中。


微信截图_20220514081758.png


  • broadcast


broadcast 方法的作用是向后代子孙组件传值,它会遍历所有的后代组件,当遍历到后代组件中 componentName 与当前的组件名一样,则触发 $emit 事件,以此来传递数据


  • dispath


dispatch 的作用是向祖先组件传值,它会一直寻找父组件,直到找到组件名和当前传入的组件名一致的祖先组件,就会触发其身上的 $emit 事件,并传递数据


下面我们看一个例子element的Select组件


微信截图_20220514081810.png


el-select(ElSelect)其实包含了ElOption、ElOptionGroup等组件,那他们子父或者子祖之间是如何通信的呢,通过的就是dispath和broadcast,我们可以看看源码中的定义,下面是ElOption组件通知el-select的写法


微信截图_20220514081829.png


ElOption组件调用dispatch方法(this.dispatch('ElSelect', 'handleOptionClick', [this.value])),通过while循环,找到上层名为ElSelect的组件,并在该组件中捕获该事件


2.2 link (Iview)


Link的方法主要是跳转链接的区分,组件中如面包屑(breadcrumb)、按钮(button)、单元格(Cell)等组件需要处理跳转链接to=""内部路由还是外部链接,还有就是点击事件的处理


如: <Button to="//iviewui.com" target="_blank">New window</Button>

  • to - linkUrl (处理链接)


微信截图_20220514081842.png


👦 啊乐同学:他是怎么区分内部外部链接哦?


答案是 : 外部链接:检测是否包含'//',内部路由:对相对路径则通过 ``router.resolve处理```


  • Click - handleClick (处理点击事件)


微信截图_20220514081853.png


我们可以看到button链接模式下的点击事件click的实现,就是借助混入mixinsLink中的handleCheckClick


微信截图_20220514081905.png


3. Validate (表单校验)


表单校验是组件库表单组件离不开的工具,作为表单数据提交前的格式检验拦截,是个不可缺的角色,我们看到element 和 Iview组件库在表单校验都使用到一个依赖async-validator


  • element


微信截图_20220514081917.png


  • IView


微信截图_20220514081935.png


树酱之前在 前端表单数据那些事 中有介绍过async-validator,感兴趣的童鞋可以看这篇👈



相关文章
|
人工智能 搜索推荐 物联网
如何训练个人的Gpt4ALL
如何训练个人的Gpt4ALL
4071 0
如何训练个人的Gpt4ALL
|
UED 开发者 容器
Flutter&鸿蒙next 的 Sliver 实现自定义滚动效果
Flutter 提供了强大的滚动组件,如 ListView 和 GridView,但当需要更复杂的滚动效果时,Sliver 组件是一个强大的工具。本文介绍了如何使用 Sliver 实现自定义滚动效果,包括 SliverAppBar、SliverList 等常用组件的使用方法,以及通过 CustomScrollView 组合多个 Sliver 组件实现复杂布局的示例。通过具体代码示例,展示了如何实现带有可伸缩 AppBar 和可滚动列表的页面。
463 1
|
JavaScript
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
712 0
|
12月前
|
监控 供应链 搜索推荐
不同行业DTC业务模型的差异化分析
DTC营销模式通过直接面向消费者,整合产业链、打造极致单品、培养超级用户等策略,实现利润快速增长。本文深入探讨DTC的定义、特点、优势、适用场景及实施策略,强调数据驱动和品牌与消费者紧密连接的重要性。
561 14
|
机器学习/深度学习 人工智能 算法
【手写数字识别】Python+深度学习+机器学习+人工智能+TensorFlow+算法模型
手写数字识别系统,使用Python作为主要开发语言,基于深度学习TensorFlow框架,搭建卷积神经网络算法。并通过对数据集进行训练,最后得到一个识别精度较高的模型。并基于Flask框架,开发网页端操作平台,实现用户上传一张图片识别其名称。
450 0
【手写数字识别】Python+深度学习+机器学习+人工智能+TensorFlow+算法模型
|
网络协议 Linux
linux系统重要文件目录
本文介绍了Linux系统中的重要目录及其历史背景,包括根目录、/usr、/etc、/var/log和/proc等目录的结构和功能。其中,/etc目录下包含了许多关键配置文件,如网卡配置、DNS解析、主机名设置等。文章还详细解释了各目录和文件的作用,帮助读者更好地理解和管理Linux系统。
325 2
|
存储 安全 Linux
OverTheWire Bandit 通关解析(上)
OverTheWire Bandit 通关解析(上)
|
自然语言处理 数据挖掘
【自然语言处理NLP】Bert中的特殊词元表示
【自然语言处理NLP】Bert中的特殊词元表示
449 3
|
关系型数据库 MySQL 数据库
Qt 无法连接MySQL数据库
Qt 无法连接MySQL数据库
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的助农扶贫的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的助农扶贫的详细设计和实现(源码+lw+部署文档+讲解等)
296 0