element 如何点击提交时 同时验证父子组件的表单

Question

如图 如何点击提交按钮的时候 同时验证父子组件的这两个输入框

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

在父组件用了上边的代码 但无法验证子组件，尽管子组件的rules有红色提示，也还是能提交成功

Answer 1

promise.all([
this.$refs[父组件formRef].validte(),
this.$refs[子组件ref].validate()
]).then(() => {
console.log("都验证成功")
})

// 子组件
methods: {
validate() {
return this.$refs[子组件formRef].validate()
}
}

Answer 2

把父组件的submit方法嵌套到子组件的validate方法里，这样只有2个校验都通过才会提交