关于javascript:饿了么elementui源码解读-button

发现自己编码遇到瓶颈时，就读一下优良框架的源码，就会受到一些启发。
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;}

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