内容摘要：本文转载自微信公众号「前端有道」，作者星野。转载本文请联系前端有道公众号。前言在刚入行时候，只会知道如何使用表单组件，在后面一两年工作中也没有什么技术积累成为一个工具人，操作最多的就是ctrl+c和c

本文转载自微信公众号「前端有道」，何手作者星野。单组转载本文请联系前端有道公众号。何手

前言

在刚入行时候，单组只会知道如何使用表单组件，何手在后面一两年工作中也没有什么技术积累成为一个工具人，单组操作最多的何手就是ctrl+c和ctrl+v，在去年进了一家新公司，单组这家公司以前旧项目代码经过太多人的何手手，代码已经快不成人样了，单组难以维护，何手技术人员已经跑的单组差不多了，我进去好在让我们负责新的何手项目开发，要不然可能第二天就看不到我了，单组哈哈。何手项目主要面向于小程序和H5端，网上的UI库很难满足产品后续规划需求开发，只好开始研究组件原理及封装组件。

最近又个项目让我有开始接触element-ui，想到当初对el-form表单有一些困惑，查看一下源码和一些技术文章，对el-form有一些新的认识。

Form 表单

下面是一份el-form示例代码

<template>   <el-form :model="ruleForm" :rules="rules" ref="ruleForm">     <el-form-item label="名字" prop="pass">       <el-input type="password" v-model="ruleForm.pass"></el-input>     </el-form-item>     <el-form-item label="年龄" prop="age">       <el-input v-model.number="ruleForm.age"></el-input>     </el-form-item>     <el-form-item>       <el-button type="primary" @click="submitForm(ruleForm)">提交</el-button>       <el-button @click="resetForm(ruleForm)">重置</el-button>     </el-form-item>   </el-form> </template> <script> export default {    data() {      return {        ruleForm: {          pass: ,         checkPass: ,         age: ,       },       rules: {          pass: [{  required: true, message: 请输入名字, trigger: blur }],         age: [{  required: true, message: 请输入年龄, trigger: blur }],       },     }   },   methods: {      submitForm(formName) {        this.$refs[formName].validate(valid => {          if (valid) {            alert(submit!)         } else {            console.log(error submit!!)           return false         }       })     },     resetForm(formName) {        this.$refs[formName].resetFields()     },   }, } </script> 

首先要清楚一下组件的使用方式

1.el-form接收model和rule两个prop

model表示表单绑定的数据对象 rule表示验证规则策略，表单验证

2.el-form-item接收的源码库prop属性，对应form组件的model数据中某个key值，如果rule刚好有key，给定的条件下去如失去焦点验证规则匹不匹配。

最终得到类似这样代码结构

<template>   <div>     <form @submit.prevent>       <div>         姓名<input v-model="form.name" />       </div>       <div>         年龄<input v-model="form.age" />       </div>       <div>         <button @click="submit">提交</button>       </div>     </form>   </div> </template> 

手写表单组件

组件中嵌套组件，主要是通过slot插槽，可以将组件拼接成上面代码结构。代码如下

el-form

<template>     <form>         <slot></slot>     </form> </template> <script> export default {      name:elForm } </script> 

el-form-item

<template>     <div>         <slot></slot>     </div> </template> <script> export default {      name:elFormItem } </script> 

el-input

<template>     <input type="text"> </template> <script> export default {      name:elInput } </script> 

 接下来就要考虑到组件中的通讯。由于组件中有可能嵌套很多的组件，如果单纯通过$parent和$children查找出来的父级组件，不一定是el-form组件。

两个问题：

el-form-item组件如何得到el-form的数据 el-form组件如何和el-form-item进行交互

解决第一问题，可以通过provide与inject实现。解决第二问题，就要讲到dispatch派发和broadcast广播

provide与inject

通过provide将当前表单实例传递到所有后代组件中，后代通过inject接受传递的值。

el-form

<template>     <form><slot></slot></form> </template> <script> export default {      name:elForm,     provide(){          return {              elForm: this         }       },     props:{          model:{              type:Object,             default:()=>({ })         },         rules:Object     } } </script> 

el-form-item

<template>     <div><slot></slot></div> </template> <script> export default {      name:elFormItem,     inject:[elForm],     props:{          label:{               type:String,             default:         },         prop:String      },     mounted(){         console.log(this.elForm)     } } </script> 

provide中this指el-form组件，this.elForm就能得到el-form组件中的数据和方法。

dispatch和broadcast广播

$dispatch与$broadcast是一种有历史的组件通信方式，因为他们是Vue1.0提供的亿华云计算一种方式，在Vue2.0中废弃了。

$dispatch: $dispatch会向上触发一个事件，同时传递要触发的祖先组件的名称与参数，当事件向上传递到对应的组件上时会触发组件上的事件侦听器，同时传播会停止。

$broadcast: $broadcast会向所有的后代组件传播一个事件，同时传递要触发的后代组件的名称与参数，当事件传递到对应的后代组件时，会触发组件上的事件侦听器，同时传播会停止(因为向下传递是树形的，所以只会停止其中一个叶子分支的传递)

$dispatch

/**  * 派发 (向上查找) (一个)  * @param componentName // 需要找的组件的名称  * @param eventName // 事件名称  * @param params // 需要传递的参数  */     dispatch(componentName, eventName, params) {          let parent = this.$parent || this.$root;//$parent 找到最近的父节点 $root 根节点         let name = parent.$options.name; // 获取当前组件实例的name         // 如果当前有节点 && 当前没名称 且 当前名称等于需要传进来的名称的时候就去查找当前的节点         // 循环出当前名称的一样的云南idc服务商组件实例         while (parent && (!name||name!==componentName)) {              parent = parent.$parent;             if (parent) {                  name = parent.$options.name;             }         }         // 有节点表示当前找到了name一样的实例         if (parent) {              parent.$emit.apply(parent,[eventName].concat(params))         }     }, 

$broadcast

/**  * 派发 (向上查找) (一个)  * @param componentName // 需要找的组件的名称  * @param eventName // 事件名称  * @param params // 需要传递的参数  */ broadcast(componentName, eventName, params) {  // 循环子节点找到名称一样的子节点 否则 递归 当前子节点 this.$children.map(child=>{      if (componentName===child.$options.name) {          child.$emit.apply(child,[eventName].concat(params))     }else {          broadcast.apply(child,[componentName,eventName].concat(params))     } }) 

验证表单

async-validator是一个表单的异步验证的第三方库，也是element-ui 中的form组件所使用的验证方式。 

el-form-item

<template>   <div>     <label v-if="label">{ { label}}</label>     <slot></slot>     { { errorMessage}}   </div> </template> <script> import Schema from "async-validator"; export default {    name: "elFormItem",   inject: ["elForm"],   props: {      label: {        type: String,       default: ""     },     prop: String   },   data(){        return { errorMessage:}   },   mounted() {      this.$on("validate", () => {        if (this.prop) {          let rule = this.elForm.rules[this.prop];         let newValue = this.elForm.model[this.prop];         let descriptor = {            [this.prop]: rule         };         let schema = new Schema(descriptor);         return schema.validate({ [this.prop]:newValue},(err,res)=>{              if(err){                  this.errorMessage = err[0].message;             }else{                  this.errorMessage =              }         })       }     });   } }; </script>