有时候会将子组件中的表单填完后的 save 事件 $emit
到父组件中,然后点击保存后怎么控制子组件中的表单验证呢?
简单来说就是在子组件内部提供一个验证方法 ,父组件验证子组件的表单实际上就是调用子组件的验证方法。
子组件中:
methods: {
validate(callback){
//这个form是子组件内部 el-form 的 ref="form"
this.$refs.form.validate((valid) => {
callback(valid)
})
}
}
父页面引入子组件 添加ref:
<child ref="form" @handleSave="save" />
<script>
import child from './components/child'
export default {
components: {
child
},
methods: {
// 这个save方法是子组件中$emit过来的
save() {
this.$refs['form'].validate((valid) => {
if (valid) {...}
}
}
}
}
</script>
如果需要验证多个表单:
const a1 = new Promise((resolve, reject) => {
this.$refs.form.validate((valid) => {
if (valid) resolve()
})
})
const a2 = new Promise((resolve, reject) => {
this.$refs.form1.validate((valid) => {
if (valid) resolve()
})
})
Promise.all([p1, p2]).then(() => {
//全部验证通过
})