仿照elementui自写表单验证

input组件中绑定input事件，将input事件和输入的值传给父组件

父组件通过v-model接收

 

button组件中当点击button后，阻止默认事件，并且发送给父组件点击事件和参数

      this.$emit('click', e)
      e.preventDefault()

主页面中，将input传过来的信息和主页面中规定的rules值传入表单外壳组件<form/>

给表单外壳组件<form/>绑定ref，通过ref执行<form/>中的validate函数

this.$refs.form.validate((valid) => {
    if (valid) {
    console.log('验证成功')
    } else {
    console.log('验证失败')
    return false
    }
})

注意:validate函数的参数是一个函数，这个函数的参数是item-form组件返回的boolean值

form中，给item-form组件提供自己的this

        provide() {
            return {
                form: this
            }
        },

执行主页面发起的validate函数，获取所有子组件，挑选有props的(item-form)，执行item-form的validate方法

            validate(callback) {
                const tasks = this.$children[0].$children
                    .filter((child) => child.prop)
                    .map((child) =>child.validate())
    
                Promise.all(tasks)
                    .then(() => callback(true))
                    .catch(() => callback(false))
            },

item-form组件中

inject: ['form'],接收form

validate() {
                if (!this.prop) return //主页面填写的prop值
                const value = this.form.model[this.prop] //对应prop的值
                const rule = this.form.rules[this.prop] //对应的prop的规则
                if (rule[0].required) {
                    if (!value) {
                        this.errMessage = '输入错误'
                        return false
                    } else {
                        this.errMessage = ''
                        return true
                    }
                }
                return true
            },