Element-UI的表单组件实现原理

可以去Element-UI官网引用里面的很多组件
https://element.eleme.cn/#/zh-CN/component/form
一个Element-Ui的小demo代码如下:

<template>
  <div>
    <el-form :model = 'model' :rules = 'rules' :ref = 'loginForm'>
       <el-form-item lable = '用户名' prop = 'username'>
           <el-input v-model = 'model.username' autocomplete = 'off'></el-input>
       </el-form-item>
       <el-form-item lable = '用户密码' prop = 'password'>
          <el-input type = 'password' v-model = 'model.password' autocpmplete = 'off'></el-input>
       </el-form-item>
       <el-form-item>
            <el-button type = 'primary' @click = 'submitForm("loginForm")'>提交</el-button>
       </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
     data() {
       return {
         model:{username:'',password:''},
         rules:{
           username:[{required:true,message:'请输入用户名'}],
           password:[{required:true,message:'请输入密码'}]
         }
       }
     },
     methods:{
       submitForm(form) {
         this.$refs[form].validata(valid => {
           if(valid) {
             alert('请求登录')
           }else {
             alert('校验失败')
           }
         })
       }
     }
  }
</script>

• 其中Form管理数据模型、校验规则
• FormItem显示lable、执行校验和显示校验结果
• Input绑定数据模型，通知FormItem执行校验

根据上面的三个小模块就有了三个需要知道的问题：
1、自定义组件：
实现自定义组件双绑需要 指定:value和@input即可，并且还需要通知父组件
2、实现自定义的el-form组件

<template>
   <form>
     <slot></slot>
   </form>
</template>
<script>
   export default {
     provide() {
       return {
          form:this
       }
     },
     methods:{
        validate(cb) {
        //执行所有的FormItem的方法
          const tasks = this.$children
          .filter(v => v.prop)
          .map(item => item.validate())

          Promise.all(tasks)
          .then(() => cb(true))
          .catch(() => cb(false))
        }
     }
   }
</script>

3、实现自定义的el-form-item组件

//FormItem要实现的任务
//预留插槽，扩展input;能够展示lable和校验的错误信息；能够进行校验

<template>
  <div>
    <lable v-if = 'lable'>
        {{lable}}
    </lable>
    <slot></slot>
    <p v-if = 'error' style = 'color:red'>
        {{error}}
    </p>
  </div>
</template>
<script>
   import Schema from 'async-validator'
  export default {
    props:['lable','prop'],
    //能够获取全局的规则
    inject:['form'],
    data() {
      return {
        error:''
      }
    },
    methods:{
      mounted() {
        this.$on('validate',this.validate)
      },
      validate() {
        //每个item都有一个validata方法
      //1、获取rule校验规则
      const rules = this.form.rules[this.prop]
      //2、获取model数据模型
      const value = this.form.model[this.prop]
      let descriptor = {
         [this.prop]:rules
      };
      const schema = new Schema(descriptor)
      return schema.validate({
         [this.prop]:value
      },errors => {
        if(errors) {
           this.error = errors[0].message
        }else {
           this.error = ''
        }
      })
      }
    }
  }
</script>

4、实现自定义的el-input组件

<template>
   <div>
      <input :type = 'type' :blur = 'onBlur' :value = 'value' @input = 'onInput' />
   </div>
</template>
<script>
  //失去焦点时触发校验以及用户输入的时候触发校验
  export default {
     props:{
         type:{
           type:String,
           default:'text'
         },
         value:{
           type:String,
           default:''
         }
     },
     methods:{
       onInput(e) {
         this.$emit('input',e.target.value);
         this.$parent.$emit("validate")
       },
       onBlur() {
         this.$dispatch('validate')
       }
     }
  }
</script>

5、最后在接口文件App.vue中使用

<template>
  <div class = 'app2'>
    <de_form :model = 'model' :rules = 'rules' :ref = 'loginForm'>
       <de_formitem lable = '用户名' prop = 'username'>
           <de_input v-model = 'model.username'></de_input>
       </de_formitem>
       <de_formitem lable = '用户密码' prop = 'password'>
          <de_input type = 'password' v-model = 'model.password'></de_input>
       </de_formitem>
       <de_formitem>
            <el-button type = 'primary' @click = 'submitForm("loginForm")'>提交</el-button>
       </de_formitem>
    </de_form>
  </div>
</template>
<script>
   import de_formitem from './components/de-FormItem'
   import de_input from './components/de-input'
   import de_form from './components/de-form'
   export default {
     components:{
       de_formitem,
       de_input
     },
     data() {
       return {
         name:'',
         model:{username:'',password:''},
         rules:{
           username:[{required:true,message:'请输入用户名'}],
           password:[{required:true,message:'请输入密码'}]
         }
       }
     },
     methods:{
       submitForm(formName) {
           this.$refs[formName].validate(valid => {
              if(valid) {
                alert('校验成功')
              }else {
                alert('校验失败')
              }
           })
       }
     }
   }
</script>