跨组件获取element的表单校验的return值来判断下一步的执行,一直获取不到

问题遇到的现象和发生背景

跨组件获取element的表单校验的return值来判断下一步的执行,一直获取不到

img

img

// 子组件的,这样子父组件调用的时候,就能接到子组件form表单的验证结果
submitForm() {
  return this.$refs["ratioForm"].validate();
}
// 父组件调用的时候 
check() {
  this.$refs.child.submitForm().then(res => {});
}


// 如果父组件需要子组件的数据
submitForm() {
  return this.$refs["ratioForm"].validate().then(() => {
    return this.formData; // 此次返回的数据将会给到你check的res
  });
}
// 父组件调用的时候 
async check() {
  let res = await  this.$refs.child.submitForm();
// 这里的res就是子组件的this.formData
}

// 回调的形式也可以 
submitForm(callback) {
  return this.$refs["ratioForm"].validate(valid => {
    callback && callback(valid);
  });
}
// 父组件调用的时候 
check() {
  this.$refs.child.submitForm(res => {
//     if xxx
  });
}
// 还有emit的方式就不多说了

直接用子组件调用父组件方法

把组件中return部分改成调用父组件的方法来修改值

其实应该算是我写法有问题,表单校验已经是异步了,return出来的,获取到的值为null是正常的,还是建议,别用我这种非常规写法