为了账号安全,请及时绑定邮箱和手机立即绑定

【Vue进阶】Element组件库源码探索

2019.01.22 11:28 7196浏览

https://img1.sycdn.imooc.com/5c45c0f80001581519140974.jpg


从element-ui的源码中,可以学到组件库的设计,Vue的高级使用方式,组件的思想等等,对vue的进阶大有裨益,以下探索一下对我们比较重要的地方。

element源码目录结构

https://img1.sycdn.imooc.com/5c45d15e0001deca04360364.jpg

  • packages 里就是存放每个组件的源代码,如Select,input等等,便于维护和管理

  • index.js 根文件,将组件对外暴露

  • transition 动画类

  • directives 全局指令

  • locale 国际化

  • utils 工具方法集

  • mixins 库用到的混合


组件的install

在main.js中,以Form组件为例:

import { Form } from 'element-ui';
import Vue from 'vue';
Vue.use(Form);

先看看以上代码中发生了什么:

注意看下面这张图,在Form组件的index.js的文件中,

https://img4.sycdn.imooc.com/5c45a06000010dcc03920182.jpg

我们可以看到,它有个install的方法,这是vue封装第三方插件的标准写法。

总结:当调用Vue.use方法的时候就会调用组件的install方法,将Vue注入到组件中去来实现组件的全局注册


provide / inject 依赖注入

父组件向它的后代组件注入数据

  • 祖先组件不需要知道哪些后代组件使用它提供的属性

  • 后代组件不需要知道被注入的属性来自哪里

直接看源码,以Form组件和它的子组件Input为例:

Form组件中:

https://img1.sycdn.imooc.com/5c467d4a00012ffc04860277.jpg

Form组件中provide将其自身注入到后代组件中,然后

input组件中:

https://img3.sycdn.imooc.com/5c467e270001b9f904420329.jpg

通过inject的方式来拿到Form组件的内容,然后做一些表单验证的操作。

总结:使用依赖注入的方式,可以避免组件之间的逐级传递。缺点是耦合度上升,日常开发中避免少使用,可以用vuex等方案来代替,尽量做到组件之间解耦。


mixins 混入

向vue组件中混入配置,注意:生命周期函数混入的话,是先执行混入的方法,再执行原来的方法,看一下官方例子:

https://img2.sycdn.imooc.com/5c4687e600011b0804840212.jpg

这里是先执行混入的created,再执行原组件的created。再来看element中的一个简单应用:

focus.js:

https://img4.sycdn.imooc.com/5c4688810001629304360178.jpg

定义了一个聚焦的混入函数,返回值是mixin,然后在Select组件中引用:

https://img1.sycdn.imooc.com/5c468972000108ee06070138.jpg


https://img1.sycdn.imooc.com/5c4689c9000101ee05320211.jpg

此时ref为reference的组件就混入了focus。

总结:当有多个组件有用到相同的data,methods,life hooks等等,都可以用mixins抽象出来复用。


这里我主要列出了比较重要和常用的部分,element-ui这个库,大家有兴趣的话可以研究它的细节,有问题可以同我交流。


后面我会持续写更新一些源码学习和进阶的文章,有兴趣的同学可以关注我。



点击查看更多内容

本文首次发布于慕课网 ,转载请注明出处,谢谢合作

7人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消