element-ui源码阅读笔记(button篇)

使用了差不多两年的vue，觉得需要提高下自己的水平，决定先从抄高质量组件开始。

element-ui使用了差不多一年，觉得很是舒服，先从最简单的按钮组件开始阅读源码，学习大神的代码习惯和代码思想。

亮点一：

computed: {
    _elFormItemSize() {
        return (this.elFormItem || {}).elFormItemSize; // ||或运算符
    },
},

这个计算方法里使用 “||” 或运算符，代替常用的三目运算符

_elFormItemSize() {
    return this.elFormItem ? this.elFormItem.elFormItemSize : undefined; // 三目运算符
},

达到的同样目的，又简化了代码。

亮点二：

computed: {
  _elFormItemSize() {
    return (this.elFormItem || {}).elFormItemSize;
  },
  buttonSize() {
    return this.size || this._elFormItemSize || (this.$ELEMENT || {}).size;
  },
  buttonDisabled() {
    return this.disabled || (this.elForm || {}).disabled;
  }
},

disabled的属性只是从自身绑定或整个表单的禁用获取，而没有从el-form-item获取，这样可以减少相似的配置参数。

亮点三：

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

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

inject: {
  elForm: {
    default: ''
  },
  elFormItem: {
    default: ''
  }
},

使用provide和inject来获取整个表单组件的公共参数，使得一处配置，全表单生效。