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

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



相关文章
|
4天前
|
JavaScript
Vue组件选项编写代码的特点和注意事项
Vue组件选项编写代码的特点和注意事项
20 2
|
9月前
|
缓存 自然语言处理 JavaScript
深入vue2.0源码系列:模板编译的实现原理
深入vue2.0源码系列:模板编译的实现原理
44 0
|
4天前
|
JavaScript
Vue项目常见的文档导入调接口
Vue项目常见的文档导入调接口
|
JavaScript 索引
Vue $set 源码解析(保证你也能看懂)
说明这个key本来就在对象上面已经定义过了的,直接修改值就可以了,可以自动触发响应
92 0
Vue $set 源码解析(保证你也能看懂)
antd组件库封装20-声明文件
antd组件库封装20-声明文件
72 0
antd组件库封装20-声明文件
antd组件库封装17-泛型3
antd组件库封装17-泛型3
47 0
antd组件库封装17-泛型3
antd组件库封装14-枚举
antd组件库封装14-枚举
69 0
antd组件库封装14-枚举
antd组件库封装18-泛型4
antd组件库封装18-泛型4
53 0
antd组件库封装18-泛型4
antd组件库封装10-函数类型和类型推断
antd组件库封装10-函数类型和类型推断
44 0
antd组件库封装10-函数类型和类型推断
|
JavaScript
js 自定义插件实现类型判断(简洁好用)
js 自定义插件实现类型判断(简洁好用)
91 0