Element-UI阅读理解(1) - 布局组件el-col

前言

想以阅读Element-UI 各个组件的方式来提升本身的vue 高阶组件的掌握程度； 抽丝剥茧，逐渐深刻； 先从简单的组件开始吧，布局组件没有任何事件；

element-ui版本：2.11.1

Layout布局，组件el-col

使用el-row和el-col ，能够自由的组合布局经过基础的 24 分栏，迅速简便地建立布局

// packages/col/src/col.js 内
复制代码

name 是组件名；

props是父组件传入的数据，其中的属性名和默认值与文档一致很好理解；

计算属性gutter

gutter是el-col 的计算属性，根据组件el-row的gutter设置el-col的padding-left padding-right；

computed: { 
    gutter() {  
        let parent = this.$parent; 
        while (parent && parent.$options.componentName !== 'ElRow') {  
            parent = parent.$parent;   
        }   
        return parent ? parent.gutter : 0;  
    }
},
复制代码

el-row和el-col之间可能有其余元素，因此须要while()的逻辑一直向上查找组件ELRow，返回ELRow的gutter的值

扩展阅读：理清this.$parent this.$root的关系访问父组件实例

forEach循环props中的属性

// 根据props生成class名
['span', 'offset', 'pull', 'push'].forEach(prop => {  
    // this[prop] 是啥箭头函数中的this
    if (this[prop] || this[prop] === 0) { 
        classList.push(prop !== 'span'  ? `el-col-${prop}-${this[prop]}`  : `el-col-${this[prop]}`);
    }
});
问：// this[prop] 是什么啊？
复制代码

答 ：箭头函数中的this指向没有改变，this是组件实例，prop 是forEach遍历数组的字符串元素 this[字符串]是访问对象属性的一种方式，等效点操做符 ‘.'(window.location.href)

文档：Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 。若是对象的键-值都不可枚举，那么将返回由键组成的数组。

h函数

return h(this.tag, {  class: ['el-col', classList],  style}, this.$slots.default);
复制代码

函数h是相似jsx语法中的createElement函数，用于建立元素,详细文档 this.$slots.default是函数的参数，子级虚拟节点。

ElCol.install的做用

// packages/col/index.js
ElCol.install = function(Vue) {  
    Vue.component(ElCol.name, ElCol);
};
问：// ElCol.install 的做用
复制代码

答 ：安装 Vue.js 插件，须要组件有install方法。若是插件是一个对象，必须提供install方法。若是插件是一个函数，它会被做为 install 方法。install 方法调用时，会将 Vue 做为参数传入。该方法须要在调用new Vue()以前被调用。当 install 方法被同一个插件屡次调用，插件将只会被安装一次。 文档：vue插件

总结

el-col总结：在render中使用createELement函数（h）建立元素，根据props的配置项给元素设置class类以及标签名，调用祖先组件el-row上的gutter属性值，给元素设置padding值；

组件el-row和el-col类似，就不写了；

扩展阅读：

理清this.$parent this.$root的关系访问父组件实例

---

To Be Contuine

有错误的地方，跪求大佬指点一二

接下来是el-form el-form-item