如何手写El-Form表单组件

本文转载自微信公众号《前端有道》，作者星野。转载本文请联系前端有道公众号。前言刚入行的时候，只知道使用表单组件。在接下来的一两年工作中，我并没有太多的技术积累成为工具人。操作最多的是ctrl+c和ctrl+v。我去年加入了一家新公司，这家公司的旧项目代码已经通过了太多人的手。代码几乎变形，难以维护。两天不见，哈哈。项目主要面向小程序和H5终端。线上的UI库很难满足后续产品规划开发的需要，只好开始研究组件原理和封装组件。最近的一个项目让我开始接触element-ui。记得一开始对el-form形式有点迷糊。查阅了源码和一些技术文章，对el-form有了一些新的认识。Form表单下方是el-form示例代码首先，我们需要明确组件的用法。1.el-form接收两个props，model和rule。模型表示由表单绑定的数据对象。el-form-item接收到的prop属性对应于表单组件模型数据中的某个键值。如果规则刚好有key，如果给定的条件丢失，则验证规则不匹配，最终得到这样的代码结构手写表单组件组件中的嵌套组件，主要是通过slot槽，可以拼接组件进入上面的代码结构。代码如下el-formel-form-item<模板>

el-input接下来要考虑的是组件中的通信。由于一个组件中可能嵌套了很多组件，如果单纯通过$parent和$children找到父组件，则不一定是el-form组件。两个问题：el-form-item组件是如何获取el-form的数据的？el-form组件如何与el-form-item交互？解决第一个问题，可以通过provide和inject来实现。解决第二个问题，就要讲一下dispatch分发和broadcast广播。Provide和inject通过provide将当前表单实例传递给所有后代组件，后代通过inject接受传递的值。el-formel-form-itemprovide中，this指向el-form组件，this.elForm可以获取el-form组件中的数据和方法。dispatch和broadcast$dispatch和$broadcast是一种历史悠久的组件通信方式，因为它们是Vue1.0提供的一种方式，在Vue2.0中被废弃了。$dispatch：$dispatch会向上触发一个事件，同时传递要触发的祖先组件的名称和参数。当事件向上传递到相应的组件时，会触发组件上的事件监听器，同时停止传播。$broadcast：$broadcast会将一个事件传播给所有的后代组件，同时传递要触发的后代组件的名称和参数。当事件传递给对应的后代组件时，会触发该组件上的事件监听器，并停止传播（因为向下传递是树形的，所以只会停止其中一个叶子分支的传递)$dispatch/***dispatch(upwardlookup)(one)*@paramcomponentName//需要查找的组件名称*@parameventName//事件名称*@paramparams//要传递的参数*/dispatch(componentName,eventName,params){letparent=this.$parent||this.$root;//$parent寻找最近的父节点$root根节点letname=parent.$options.name;//获取当前组件的名称instance//如果有一个节点&&当前没有名字并且当前名字等于需要传入的名字，那么就去寻找当前节点//循环出当前名字相同的组件实例while(parent&&(!name||name!==componentName)){parent=parent.$parent;if(parent){name=parent.$options.name;}}//有一个节点代表当前的Found一个同名实例if(parent){parent.$emit.apply(parent,[eventName].concat(params))}},$broadcast/***dispatch(searchup)(one)*@paramcomponentName//需要查找的组件名称*@parameventName//事件名称*@paramparams//需要传递的参数*/broadcast(componentName,eventName,params){//循环子节点查找同名子节点或递归当前子节点this.$children.map(child=>{if(componentName===child.$options.name){child.$emit.apply(child,[eventName].concat(params))}else{broadcast.apply(孩子,[componentName,eventName].concat(params))}})validationformasync-validator是一个异步验证表单的第三方库，也是element-uiel-form-item中表单组件使用的验证方式