需求背景:
vue实际开发过程中,可能需要在某一个子组件调用另一个子组件的方法,从而实现业务需求。
例如以下的一个业务场景。
如上就涉及到到组件B需要调用组件A的form验证方法。
解决思路:
利用共同的父组件C,我们可以在C组件通过ref来调用A组件的方法。
再在B组件内发射一个自定义事件,在组件C接受这个自定义事件的时候,进行A组件内的表单验证函数,书写一个回调函数(返还想要的参数,例如表单是否验证成功的布尔值)。
最后在B组件内接收在这回调函数所返还的值,进行自己的业务逻辑代码的书写。
代码实现:(参考)
组件A
submitForm() {
let fromVal = false;
this.$refs.formRef.validate((val) => {
fromVal = val;//是否验证成功
});
return fromVal;
},
组件C:
const validateFrom = (e) => {
//触发A组件的表单验证方法
let data = tabthirdRef.value.submitForm();
e.callback(data);//把这个值回传到组件B
};
组件B:
let formValData = false;
context.emit('validateFrom', {
callback: (val) => {
formValData = val;
},
});
if(formValData){
//通过表单验证业务逻辑代码
}else {
//未通过表单验证业务逻辑代码
}
以上代码是逻辑实现,仅供参考。