<el-row :gutter="20">
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

组件模板

<div class="el-row">
  <slot></slot>
</div>
render(h) {
  return h(this.tag, {
    class: [
      'el-row',
    ]
  }, this.$slots.default);
}

<div class="el-col">
  <slot></slot>
</div>
render(h) {
  return h(this.tag, {
    class: [
      'el-col',
    ]
  }, this.$slots.default);
}

el-col

computed: {
  gutter() {
    let parent = this.$parent;
    while (parent && parent.$options.componentName !== 'ElRow') {
      parent = parent.$parent;
    }
    return parent ? parent.gutter : 0;
  }
},
render(h) {
  let classList = [];
  classList.push(`el-col-${this.span}`);
  let style = {};
  if (this.gutter) {
    style.paddingLeft = this.gutter / 2 + 'px';
    style.paddingRight = style.paddingLeft;
  }
  return h(this.tag, {
    class: [
      'el-col',
       classList
    ]
  }, this.$slots.default);
}

使用 provide/inject 的方式去把祖先节点的实例注入到子组件中

// el-row 组件中
provide() {
  return {
    row: this
  };
}
// el-col 组件
inject: ['row']

el-row

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',
    ],
    style: this.style
  }, this.$slots.default);
}

参考资料

1. Element源码分析系列1一Layout(布局)
2. Element-UI 技术揭秘（3）— Layout 布局组件的设计与实现