<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: '' }); // 表單數(shù)據(jù)
const rules = { // 驗證規(guī)則
  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('驗證通過，數(shù)據(jù)：', values);
    // 提交數(shù)據(jù)邏輯...
  } catch (error) {
    console.log('驗證失敗', error);
  }
};
</script>