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