仿 elementui-Form

​

​ 相信大家在使用vue ui库的时候,一定少不了使用form组件，笔者在平时项目中使用的是elementui，所以在使用的时候真心感觉很方便，不过在方便之余，我也看了看form的源码，其中的校验使用的第三方库async-validator，async-validator是一个表单的异步验证的第三方库，它是 https://github.com/tmpfs/async-validate 的演变来的。想了解async-validator的可以看 https://www.jianshu.com/p/2105c48b45c7

​ 下面我们来了解一下UI库的用法

​ 首先我们能看到el-form组件中包含el-form-item 那说明el-form组件中至少是这样的

// form组件

    

el-form中包含一个slot插槽

el-form 接受两个参数:model="formLabelAlign" :rules="rules"

同理el-form-item的样子

​ 对于el-input 来说 当值改变后通知父组件

这样父组件里面就必须包含input，doValidate两个方法了

再回到formItem的样子

...

在使用elementui form 的时候触发校验是通过 this.$refs[formName].validate校验是需要知道form里面都包含那个几个组件就是说 formItem注册的时候需要通知form

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

所以 form里面应该包含一个校验方法,和包含监听的formItemAdd方法.将formItem放到form的数组中，formitem中需要在mounte的时候通知父组件

//form 组件

// form-item
...

说到 这里form组件基本封装成功了

以下是完成源代码

form.vue

formItem.vue

myInput.vue

调用 index.vue