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