2.Mixin(混入)
❝Mixin相信大家不陌生,mixin提供了一种非常灵活的方式,可以用来分发Vue组件中的可复用功能,借助Mixin多个组件可以共享数据和方法。同时引入mixin的组件,mixin中的方法和属性也就并入到该组件中,可以直接使用。钩子函数也将会在两个都被调用(Mixin中的钩子会先执行)
❞
2.1 dispath 和 broadcast(Iview & element)
❝Vue新版本中去掉了broadcast和dispatch的方法,分别是用来作:事件广播 和 事件派发的要。而后来 element ui 和 iview 中对 broadcast 和 dispatch 方法进行了重写,并通过 mixin 的方式植入到每个组件中。
❞
- broadcast
❝broadcast 方法的作用是向后代子孙组件传值,它会遍历所有的后代组件,当遍历到后代组件中 componentName 与当前的组件名一样,则触发 $emit 事件,以此来传递数据
❞
- dispath
❝dispatch 的作用是向祖先组件传值,它会一直寻找父组件,直到找到组件名和当前传入的组件名一致的祖先组件,就会触发其身上的
❞$emit
事件,并传递数据
下面我们看一个例子element的Select组件
el-select(ElSelect)其实包含了ElOption、ElOptionGroup等组件,那他们子父或者子祖之间是如何通信的呢,通过的就是dispath和broadcast,我们可以看看源码中的定义,下面是ElOption组件通知el-select的写法
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
(处理链接)
❝👦 啊乐同学:他是怎么区分内部外部链接哦?
❞
答案是 : 外部链接:检测是否包含'//',内部路由:对相对路径则通过 ``router.resolve处理```
- Click -
handleClick
(处理点击事件)
我们可以看到button链接模式下的点击事件click的实现,就是借助混入mixinsLink中的handleCheckClick
3. Validate (表单校验)
❝表单校验是组件库表单组件离不开的工具,作为表单数据提交前的格式检验拦截,是个不可缺的角色,我们看到element 和 Iview组件库在表单校验都使用到一个依赖
❞async-validator
- element
- IView
树酱之前在 前端表单数据那些事 中有介绍过async-validator,感兴趣的童鞋可以看这篇👈