vue3父组件调用子组件方法的思路及实例代码

<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>

<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>