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

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



相关文章
|
6月前
|
JavaScript 前端开发 Serverless
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
Vue.js的介绍、原理、用法、经典案例代码以及注意事项
218 2
|
7月前
|
JavaScript
Vue组件选项编写代码的特点和注意事项
Vue组件选项编写代码的特点和注意事项
41 2
|
3月前
|
前端开发 JavaScript 区块链
react18函数组件+antd使用指南-使用代码集合以及报错记录汇总
本文介绍了多个React开发中常见的问题及其解决方案,包括但不限于:1)`useForm`实例未连接到任何`Form`元素的警告及解决方法;2)监听页面滚动事件的实现方式;3)React 18与antd 5.8.6中定制主题的方法;4)React结合antd 4.x版本自定义主题色的步骤;5)解决`ResizeObserver loop`相关报错的技巧;6)处理React设计表单时遇到的CDN资源加载失败问题;7)解决onClick事件传参问题;8)修复类型错误等。每部分均提供详细分析与实用代码示例,帮助开发者快速定位并解决问题。
69 2
|
2月前
|
JavaScript
Vue路由传参实战指南:三种常用方法示例演示
Vue路由传参实战指南:三种常用方法示例演示
130 0
|
4月前
|
JavaScript API 对象存储
|
缓存 自然语言处理 JavaScript
深入vue2.0源码系列:模板编译的实现原理
深入vue2.0源码系列:模板编译的实现原理
90 0
|
7月前
|
前端开发 流计算 索引
JS+ES6新增字符串操作方法大汇总,共四十七种方法
JS+ES6新增字符串操作方法大汇总,共四十七种方法
|
Go
Go 1.18 新增三大功能之一“泛型”怎么使用?
Go 1.18 新增三大功能之一“泛型”怎么使用?
81 0
antd组件库封装20-声明文件
antd组件库封装20-声明文件
99 0
antd组件库封装20-声明文件
antd组件库封装44-添加字体变量方案
antd组件库封装44-添加字体变量方案
96 0
antd组件库封装44-添加字体变量方案