vue3父组件调用子组件方法

需求：在vue3中需要在父组件调用子组件的方法

思路：通过ref和defineExpose直接暴露给父组件

1.子组件暴露表单验证方法

<template><a-form ref="formRef" :model="formState" :rules="rules"><a-form-item label="用户名" name="username"><a-input v-model:value="formState.username" /></a-form-item></a-form>
</template><script setup>
import { ref } from 'vue';const formRef = ref(); // 表单引用
const formState = ref({ username: '' }); // 表单数据
const rules = { // 验证规则username: [{ required: true, message: '请输入用户名' }]
};// 暴露给父组件的验证方法
const validate = () => formRef.value.validate();defineExpose({ validate }); // 暴露方法
</script>

2.父组件触发子组件表单验证

<template><ChildForm ref="childFormRef" /><a-button @click="handleSubmit">提交</a-button>
</template><script setup>
import { ref } from 'vue';
import ChildForm from './ChildForm.vue';const childFormRef = ref(); // 子组件引用const handleSubmit = async () => {try {const values = await childFormRef.value.validate();console.log('验证通过，数据：', values);// 提交数据逻辑...} catch (error) {console.log('验证失败', error);}
};
</script>