饿了么element-ui源码解读 button

Posted 2021-09-27 亲爱的阿乾

发现自己编码遇到瓶颈时，就读一下优秀框架的源码，就会受到一些启发。
button 组件是element-ui 最简单的组件，就从它开始吧。

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

何为inject

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。是2.2.0版本 新增的。
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

有了上面的概念我们就清楚了，inject 就是父组件（或者祖父组件）向子组件注入了一个变量，子组件就可以通过访问这个变量来使用父组件内的属性或者方法了，那么如何在父组件内使用呢，以上面el-button来举例，在el-form组件内有如下代码，会通过变量elForm将组件的实例this注入到子组件el-button中。

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

vue 组件的依赖注入 inject provide 你学费了嘛

继续阅读源码，在计算属性computed中发现这段代码

 buttonDisabled() {
    return this.disabled || (this.elForm || {}).disabled;
 }

this.disabled 是props参数，this.elForm是父组件（或者祖父组件）实例。如果el-button没有搭配el-form使用，则在el-button组件内访问不到this.elForm。我们看上面那段代码的骚操作。简短一句话，就解释清楚了。如果是我可能会这么写。

buttonDisabled() {
    let flag = false;
    if(!this.disabled){
        if(this.elForm && this.elForm.disabled){
            flag = true;
        }else{
            flag = false;
        }
    }else{
        flag = true;
    }
    return flag;
}

开个玩笑，你不会真的以为我会这样写吧。
但是我可能会这样写

buttonDisabled() {
    let flag = false;
    if(!this.disabled){
        flag = this.elForm && this.elForm.disabled;
    }else{
        flag = true;
    }
    return flag;
}

不不，应该会这样写

buttonDisabled() {
    return this.disabled || this.elForm && this.elForm.disabled;
}

还是饿了么的源码有逼格。