乐趣区

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

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

退出移动版