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

简介: 前沿:这几年,前端的组件库的演变迅速,社区脱颖而出不少优秀的开源组件库,包括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,感兴趣的童鞋可以看这篇👈



相关文章
|
存储 安全 Ubuntu
百度搜索:蓝易云【T-Pot安装教程。】
请注意,T-Pot是一个强大的工具,需要谨慎使用。确保你遵守适用的法律法规,并且仅在合法的环境中使用T-Pot进行安全测试和研究。
488 0
|
人工智能 搜索推荐 物联网
如何训练个人的Gpt4ALL
如何训练个人的Gpt4ALL
4085 0
如何训练个人的Gpt4ALL
|
机器学习/深度学习 人工智能 算法
机器学习笔试面试之图像数据不足时的处理方法、检验方法、不均衡样本集的重采样
机器学习笔试面试之图像数据不足时的处理方法、检验方法、不均衡样本集的重采样
432 0
|
监控 数据可视化 前端开发
利用低代码平台加速软件开发:现状与未来
【10月更文挑战第18天】低代码平台通过可视化界面和预构建模块,使非专业开发者也能快速构建应用程序,提高开发效率并扩大参与群体。本文探讨了低代码平台的现状、优势、挑战及未来影响,包括提升开发速度、降低技术门槛、减少维护成本和促进业务与IT协作等方面。同时,文章也讨论了定制化限制、性能问题和依赖性风险等挑战,并提供了实施低代码平台的最佳实践建议。
|
C++ iOS开发
02 C++ - 开发环境下载与安装(CLion)
02 C++ - 开发环境下载与安装(CLion)
408 0
|
存储 安全 Linux
OverTheWire Bandit 通关解析(上)
OverTheWire Bandit 通关解析(上)
|
自然语言处理 数据挖掘
【自然语言处理NLP】Bert中的特殊词元表示
【自然语言处理NLP】Bert中的特殊词元表示
457 3
|
关系型数据库 MySQL 数据库
Qt 无法连接MySQL数据库
Qt 无法连接MySQL数据库
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的助农扶贫的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的助农扶贫的详细设计和实现(源码+lw+部署文档+讲解等)
303 0
|
存储 程序员 Shell
【C/C++ 内存管理函数】C语言动态内存管理大揭秘:malloc、calloc、realloc与new的对比与差异
【C/C++ 内存管理函数】C语言动态内存管理大揭秘:malloc、calloc、realloc与new的对比与差异
633 0