前言
想以阅读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
