关于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;}

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