el-row 源码解析

export default {

  name: 'ElRow',

  componentName: 'ElRow', // 自定义的组件名

  props: {

    tag: { // 自定义的标签名，后面用来进行render 函数的渲染

      type: String,

      default: 'div'

    },

    gutter: Number, // 栅格布局，是用来指定 子元素 el-col的间距

    type: String, // 布局默认,可选的是 flex

    justify: {

      type: String,

      default: 'start' // flex 布局

    },

    align: String // flex布局

  },

  


  computed: {

    style() { // 使用计算属性生成style

      const ret = {};
 
      if (this.gutter) {

        ret.marginLeft = `-${this.gutter / 2}px`;

        ret.marginRight = ret.marginLeft;

      }

      return ret;

    }

  },

  


  render(h) {  // render函数

    return h(this.tag, {

      class: [

        'el-row',

        this.justify !== 'start' ? `is-justify-${this.justify}` : '',

        this.align ? `is-align-${this.align}` : '',

        { 'el-row--flex': this.type === 'flex' }

      ],

      style: this.style

    }, this.$slots.default); // 默认插槽的虚拟dom

  }

};

这里主要是关注render 函数的使用,使用了this.$slots.default 奇妙的把插槽元素进行render.

以及上面绑定class的操作