要看源码就得从最简单的开始,button够简单的了,就从他开始吧。

安装依赖后源码目录在:node_modules/element-ui/packages中,可以看到这里的文件夹命名是不是很熟悉,就是我们平时写的组件名,打开任何一个文件夹,都有一个src文件夹和一个index.js,src文件夹放组件,index.js用于注册组件

下面来看具体的button源码如何写的:

分析从三个方面着手:DOM结构,数据属性,事件

DOM结构:

按钮的DOM结构很简单,要显示成什么样子就由css样式及一些自带的属性决定了,这些就交给数据属性来控制

<button></button>

  

数据属性:

按钮的样式,大小,显示内容,类型等都需要通过数据属性来控制,这些数据属性分两块:

a、直接引用props

b、引用computed的属性

直接引用props的数据大家都能理解,为什么还用到computed呢?

这里就涉及到provider/inject,

provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。注意官方文档有一句话“向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效”,这样看来就明显了,父组件提供的属性只能在直接子组件中获取到,孙组件就获取不到,provide提供的属性就解决了这个问题。

为什么用到computed?答案就很明显了,防止全局设置/父组件的属性,孙组件获取不到

Vue.use(Element, {
size: Cookies.get('size') || 'medium' // set element-ui default size
})

  

有了provider/inject,这里配置的size才能全局起作用。

事件:

这里涉及到父子组件通信,子组件向父组件发消息可以用emit实现,父组件监听即可,一般情况下父组件监听的事件名都是自定义的,这里特殊了点,父组件直接监听了“click”事件,谁让button通常就一个点击事件呢

index.js:

js的作用很简单,注册组件并导出

最后:

源码DOM结构上有这样一句:

<span v-if="$slots.default"><slot></slot></span>

 

我们知道插槽有具名插槽和不具名插槽,“$slots.default”指代的就是不具名插槽。为什么要这么写,而不是:

<span><slot></slot></span>

  

这里其实是一个很细心的点,如果<el-button></el-button>不写内容,将会少一个span节点,渲染后的DOM是这样的

<button data-v-06af20c4="" type="button" class="el-button el-button--default el-button--medium"></button>

  

如果去掉v-if="$slots.default",渲染后将是这样的

<button data-v-06af20c4="" type="button" class="el-button el-button--default el-button--medium"><span></span></button>

  

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------

除了学知识,我们还可以从源码中学到一点规范:

:class="[
type ? 'el-button--' + type : '',
buttonSize ? 'el-button--' + buttonSize : '',
{
'is-disabled': buttonDisabled,
'is-loading': loading,
'is-plain': plain,
'is-round': round,
'is-circle': circle
}

  

绑定的class做了归类,boolean类型的归为了一类,放到对象中,我们是不是也可以这样写,让代码更整齐呢

element ui源码解析 -- button篇的更多相关文章

  1. element ui源码解析 -- input篇

    el-input是element ui中使用最频繁的组件之一了,分析其构成从四个方面入手:DOM结构,属性,样式,事件入手 DOM结构: <div> <input /> < ...

  2. jQuery2.x源码解析(缓存篇)

    jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) 缓存是jQuery中的又一核心设计,jQuery ...

  3. jQuery2.x源码解析(构建篇)

    jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) 笔者阅读了园友艾伦 Aaron的系列博客< ...

  4. jQuery2.x源码解析(设计篇)

    jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) 这一篇笔者主要以设计的角度探索jQuery的源代 ...

  5. jQuery2.x源码解析(回调篇)

    jQuery2.x源码解析(构建篇) jQuery2.x源码解析(设计篇) jQuery2.x源码解析(回调篇) jQuery2.x源码解析(缓存篇) 通过艾伦的博客,我们能看出,jQuery的pro ...

  6. Shiro源码解析-Session篇

    上一篇Shiro源码解析-登录篇中提到了在登录验证成功后有对session的处理,但未详细分析,本文对此部分源码详细分析下. 1. 分析切入点:DefaultSecurityManger的login方 ...

  7. Spring源码解析 | 第二篇:Spring IOC容器之XmlBeanFactory启动流程分析和源码解析

    一. 前言 Spring容器主要分为两类BeanFactory和ApplicationContext,后者是基于前者的功能扩展,也就是一个基础容器和一个高级容器的区别.本篇就以BeanFactory基 ...

  8. myBatis源码解析-反射篇(4)

    前沿 前文分析了mybatis的日志包,缓存包,数据源包.源码实在有点难顶,在分析反射包时,花费了较多时间.废话不多说,开始源码之路. 反射包feflection在mybatis路径如下: 源码解析 ...

  9. myBatis源码解析-类型转换篇(5)

    前言 开始分析Type包前,说明下使用场景.数据构建语句使用PreparedStatement,需要输入的是jdbc类型,但我们一般写的是java类型.同理,数据库结果集返回的是jdbc类型,而我们需 ...

随机推荐

  1. linux 进程等待 wait 、 waitpid

    waitpid() 与 wait() 功能相似,都是用户主进程等待子进程结束或中断. 可用于进程之间的同步 wait 函数原型 pid_t wait(int *status); 函数说明 wait() ...

  2. js call 和 apply

    前言 call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向. call 和 apply二者的作用完全一样,只是接 ...

  3. WinRAR 5.21 去弹窗 疑惑

    WinRAR 突然就有弹窗广告了 ,找了个方法,重新写一下安装目录下的 rarreg.key,确实有效果但是重写的和之前的完全一样啊,至少在文本中完全一样,怎么回事. 下面附上两个文件, 1.key ...

  4. Vagrant 和 docker

    Docker应用实践 http://dockerone.com/article/146 Vagrant 适合用来管理虚拟机,而docker适合用来管理应用环境 http://www.linuxidc. ...

  5. Boot_Strap基础

    1.数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding).如: <div class="container"> ...

  6. Linux基础(vim)

    1.源文件到可执行文件经历了什么? gcc -E main.c -o(输出) main.i 第一阶段:预处理:加载了include文件 gcc -S main.i -o main.s 第二阶段:编译( ...

  7. 搭建并配置本地GitLab服务器教程

    由于工作单位不一定能够方便使用外部网络,现以下载rpm包来搭建一套本地GitLab服务器. 1. 系统准备 系统:redhat 7.3 2. 下载所需安装包 去官网下rpm包,下载地址,ce是免费的社 ...

  8. 00079_增强for循环

    1.格式 /* * JDK1.5新特性,增强for循环 * JDK1.5版本后,出现新的接口 java.lang.Iterable * Collection开始继承Iterable * Iterabl ...

  9. .Net中的缓存依赖配置

    缓存--能非常好的提高网站的性能. 在訪问量大,但更新较少的站点中使用缓存,能够大大提高执行效率. 在.net中给我们提供了非常好的缓存机制.页面缓存.数据缓存,还有非常好的依赖缓存. 依赖缓存优点就 ...

  10. Java7与G1

    Lucene 4.8開始不支持java6了,所以在下次版本号升级之前我们要先升级至java7. 我使用1/3的全量索引(7.3G).进行測试,20并发,40万请求: sun jdk 1.6.0_26 ...