当你发现编码遇到瓶颈时，阅读优秀框架的源码，你会得到一些启发。按钮组件是element-ui最简单的组件，我们先从它开始吧。inject:{elForm:{default:''},elFormItem:{default:''}}为什么injectprovide和inject主要是提供高级插件/组件库的用例。不建议直接在应用程序代码中使用。它是2.2.0版本中的新功能。这对选项需要一起使用，才能让一个祖先组件向它的所有子孙组件注入依赖，无论组件层级有多深，只要建立了上下游关系，它就会一直生效。有了上面的概念，我们就可以理解inject是指父组件（或祖父组件）向子组件注入一个变量，子组件通过访问这个变量就可以使用父组件中的属性或方法。在组件中使用，以上面的el-button为例。el-form组件中有如下代码，将组件的实例this通过变量elForm注入到子组件el-button中。provide(){return{elForm:this}}，vue组件的依赖注入injectprovide你交学费了吗？继续阅读源码，在计算属性中找到这段代码buttonDisabled(){returnthis.disabled||(this.elForm||{}).disabled;}this.disabled是props参数，this.elForm是父组件（或祖父组件）实例。如果el-button不和el-form一起使用，则el-button组件中无法访问到this.elForm。我们来看看上面代码的风骚操作。一句话就能解释清楚。如果是我可能会这样写。buttonDisabled(){让标志=false;如果（！this.disabled）{如果（this.elForm&&this.elForm.disabled）{flag=true;}else{flag=false;}}else{flag=true;}returnflag;}开个玩笑，你不会真的认为我会写这个。但我可能会写buttonDisabled(){letflag=false;如果（！this.disabled）{flag=this.elForm&&this.elForm.disabled;}else{flag=true;}returnflag;}不不，应该这样写buttonDisabled(){returnthis.disabled||this.elForm&&this.elForm.disabled;}还是饿了么的源码很吸引人。
