vue项目中封装表单中的el-input组件

场景: 

1. 在开发表单组件时, 通过v-model绑定dataForm中的某一个字段(signature)时, 可能需要在不同的地方编写3次

 2. 若这个字段需要后端校验, 且需要显示后端返回的校验信息, 我们则需要在定义一个变量用于储存, 读取, 清除, 以及在调用自定义的api时进行传参, 此时, signature字段需要再写3次

 

 综上所述, signature字段一共编写6次, 一旦后端更改这个字段, 我需要改6次. 可想而知, 增加工作负担, 还会造成代码冗余

封装:

1. 定义子组件

 2. 定义formComponentMixin混入(仿照elForm源码进行封装表单控件)

 

 3. 调用时, 我们需要在model属性绑定form本身, 其次, 在prop上绑定对应的字段, 在dataForm中, errorObj中都不再需要定义当前字段了, 而且你也不需要再定义clearErrorObj()方法了

 

 4. 之前我们在调用api时, 还会传 this.errorObj, 如图: 

 

现在,  我们在$api上做了改造, 利用Object.defineProperty() 改变this指向, 使this.$api.signatureRegister()  中的signatureRegister方法里面的this直接指向 Vue实例, 从而在getAPI()中, 就可以拿到 vue实例上的errorObj对象了

 

 所以, 现在直接调用api方法,  不再需要传this.errorObj了