props: {
    tag: {
      type: String,
      default: 'div'
    },
    gutter: Number,
    type: String,
    justify: {
      type: String,
      default: 'start'
    },
    align: String
  },
computed: {
  style() {
    const ret = {};

    if (this.gutter) {
      ret.marginLeft = `-${this.gutter / 2}px`;
      ret.marginRight = ret.marginLeft;
    }

    return ret;
  }
},
render(h) {
    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);
  }

// 主要实现的函数：render(h)
render(h) {
    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);
  }
  // this.tag === 'div'
  /*
  {
      class: [
        'el-row',
        this.justify !== 'start' ? `is-justify-${this.justify}` : '',
        // 如果指定了justify，类名就为is-justify-${this.justify}，然后根据css修改布局
        this.align ? `is-align-${this.align}` : '',
        { 'el-row--flex': this.type === 'flex' }
        // 如果this.type指定了flex，则类名有el-row--flex
      ],
      style: this.style //用计算属性，计算gutter/2为margin-left和margin-right,返回对象直接给style属性
    }
  */

props: {
    span: {
      type: Number,
      default: 24
    },
    tag: {
      type: String,
      default: 'div'
    },
    offset: Number,
    pull: Number,
    push: Number,
    xs: [Number, Object],
    sm: [Number, Object],
    md: [Number, Object],
    lg: [Number, Object],
    xl: [Number, Object]
  },

  computed: {
    gutter() {
      let parent = this.$parent;
      while (parent && parent.$options.componentName !== 'ElRow') {
        parent = parent.$parent;
      }
      return parent ? parent.gutter : 0;
    }
  },
  render(h) {
    let classList = [];
    let style = {};

    if (this.gutter) {
      style.paddingLeft = this.gutter / 2 + 'px';
      style.paddingRight = style.paddingLeft;
    }

    ['span', 'offset', 'pull', 'push'].forEach(prop => {
      if (this[prop] || this[prop] === 0) {
        classList.push(
          prop !== 'span'
            ? `el-col-${prop}-${this[prop]}`
            : `el-col-${this[prop]}`
        );
      }
    });

    ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {
      if (typeof this[size] === 'number') {
        classList.push(`el-col-${size}-${this[size]}`);
      } else if (typeof this[size] === 'object') {
        let props = this[size];
        Object.keys(props).forEach(prop => {
          classList.push(
            prop !== 'span'
              ? `el-col-${size}-${prop}-${props[prop]}`
              : `el-col-${size}-${props[prop]}`
          );
        });
      }
    });

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

// 主要实现的方法,还是用render()函数
return h(this.tag, {
    class: ['el-col', classList],
    style
}, this.$slots.default);
// tag还是一样,默认用div

// class里面主要是classList
['span', 'offset', 'pull', 'push'].forEach(prop => {
    if (this[prop] || this[prop] === 0) {
      classList.push(
        prop !== 'span'
          ? `el-col-${prop}-${this[prop]}`
          : `el-col-${this[prop]}`
      );
    }
});
// 遍历span和offset组成的数组。
// 如果使用组件时，如果传递了对应的props
// 并且遍历不是span时，将 `el-col-${prop}-${this[prop]}`  push进classList
// 如果遍历到span时，将`el-col-${this[prop]}` push进classList
// 所以span是一个单独的样式，el-col-xxx, 其他的是：例如 el-col-offset-xxx, xxx为传入的props值

  
// 下面是如何用父组件row的margin，来设置子组件col的间距的
if (this.gutter) {
  style.paddingLeft = this.gutter / 2 + 'px';
  style.paddingRight = style.paddingLeft;
}
// 使用col自身的gutter属性，设置内边距，paddingLeft和paddingRight
// 疑问？？ col自身哪里来的gutter属性？
// 解决：col的计算属性gutter
computed: {
    gutter() {
      // vue提供的钩子，this.$parent拿到父节点
      let parent = this.$parent;
      while (parent && parent.$options.componentName !== 'ElRow') {
        // 如果有父节点,并且父节点不是row组件,
        // 再往上找一层父节点
        parent = parent.$parent;
      }
      // 如果找到父节点，或者就是row, 返回父节点的gutter
      // 父节点的gutter(就是marginLeft和margintRight组成的对象)
      return parent ? parent.gutter : 0;
    }
},
// 所以是找父节点的计算属性gutter，返回过来的。
// 为何要找row的gutter?而不是自己设置自己的gutter?
// 大部分情况下，会写多个col组件，如果都自己设置，非常麻烦。