需求背景:
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 {//未通过表单验证业务逻辑代码}
以上代码是逻辑实现,仅供参考。