element-ui组件封装技巧

element-ui组件封装技巧

1. 封装内外嵌套的组件

如breadcrumb和breadcrumb-item，这时需要把绑定到breadcrumb上的参数透传给子组件，于是可以

provide() {
  return {
    elBreadcrumb: this
  };
},

子组件内：

inject: ['elBreadcrumb'],

访问的时候：

this.separator = this.elBreadcrumb.separator;

第二种方式：

gutter() {
      let parent = this.$parent;
      while (parent && parent.$options.componentName !== 'ElRow') {
        parent = parent.$parent;
      }
      return parent ? parent.gutter : 0;
    }