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
            },