Vue组件化实践：1. 手撸实现element form表单

做一个通用型组件，一个很重要的原则是：高内聚，低耦合。简单来说呢，就是让它最小单位化，最好只做一件事。

要学习源码，先要学会怎么看别人的源码，所以做之前，我先去喵了下element开源库相关内容，今天所模拟的内容就在：
https://github.com/ElemeFE/element/tree/dev/packages/form
基本上，element的组件源码都放在packages这个目录下

我们往往是从最小组件写起，也就是最里层的input, 先实现input里的双向绑定v-model：

1. 绑定一个value值，用来接收父组件的传值
2. 监听input事件，实时监测输入值的改变，但是要注意vue的单向数据流，不要在子组件里修改父组件里的传值，而是要抛事件出去，给v-model接收
3. 新建index.vue，试验输入用户名时，能看到model.username的值跟着变，没毛病，继续

实现Form

1. 接收model数据和校验规则rules，并将其传给后代组件，这里是通过provide实现的，element将整个实例this传递给了后代
2. 放个插槽，方便自定义内容，比如FormItem

实现Form-Item

写之前，我们先了解async-validator这个校验库，一会会用到，这里简单介绍下（具体可以参考：https://www.npmjs.com/package/async-validator）：

1. 要先创建一个校验规则description, 它是一个对象， key为要验证的属性，值为它的验证规则，结构其实跟我们传的rules是一样的：

// 可以理解为一个单一的rules
const desc = rules = {
  username: [{
    required: true, message: '请输入用户名'
  }]
}

2. 使用校验规则创建一个校验对象 js var validate = new AsyncValidate(desc)
3. 调用校验对象上的校验方法

// validate是AsyncValidate的一个内置方法，参数：1. source（要校验的对象）， 2. options（一些配置项，非必须），3. 回调函数，默认参数为errors
validate.validate({username: [username的值]}, errors => {
  // 校验不通过
  if(errors) {
    console.log(errors)
  }else {
    // 校验通过
    console.log("ok!")
  }
})

开始实现Form-Item

1. 里边设置一个插槽，方便在里头放表单控件，比如上面那个EInput组件
2. 接收父祖件的label标签和要校验的prop值，此两值都非必填项
3. 实现表单验证功能
   • 接收父祖件传递的 model数据和 rules验证规则
   • 使用async-validator库实现校验功能，将传递的rules, prop, model结合进行校验

说那么多，不如上代码:

4. 补充下EInput组件，在输入值改变时，给其添加调用调用父组件的验证方法

// EInput.vue
methods: {
   onInput(e) {
     this.$emit("input", e.target.value)
    // 在输入值改变时，触发父组件EFormItem的校验方法
     this.$parent.validate()
   }
 }

5. 改下index.vue，把这三都串一串使用, 试验下，没问题，那么大致的基础功能都实现了

处理提交全部校验功能

看下element的表单，它其实不只是单个表单控件会在输入完成后做校验，在提交时，也会有个全部校验的功能，而这个功能是挂载在EForm这个元素上的。我们来模拟实现功能。

// 官网示例
 submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

分析一下：

1. 全局校验这个方法是挂载在Form表单上的，所以要在EForm这个组件里，添加一个全局校验方法validate，它的参数是一个回调函数，
2. 在整合三个组件的入口，要添加一提交按钮，点击后触发EForm组件的validate

// EForm.vue
methods: {
   validate(cb) {
    //  这里会报错，因为有些元素是没有prop属性的，所以没法进行校验，要对其进行排除
    //  const tasks = this.$children.map(item => item.validate())
     const tasks = this.$children.filter(item => item.prop).map(item => item.validate())

    // validate返回的是一个promise，所以可以使用Promise.all来处理所有回调
     console.log('tasks:', tasks); // [Promise, Promise]
     Promise.all(tasks)
      .then(() => cb(true))
      .catch(() => cab(false))
   },
 }