vue3父组件获取子组件的数据

父组件ProductGroupAdd.vue
通过defineExpose方法把子组件的方法暴露出来，toRaw 方法的作用是从响应式代理对象中提取原始值

<template>
  <div class="page" v-loading="loading">
    <div class="right-scroll">
      <div class="box-title">商品组基本信息</div>
      <BasicRef ref="basicRef" :key="activeKey" :date="basicObj" :mode="mode" />
      <div class="box-title">商品组详情</div>
      <Detail ref="setRef" :key="activeKey" :date="detailObj" :mode="mode" />
    </div>
    <div class="bottom-flex-wai">
      <el-button @click="resetQuery">取消</el-button>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </div>
  </div>
</template>
<script setup>
const { proxy } = getCurrentInstance();
const mode = ref('add')
const loading = ref(false)
const basicRef = ref(null);
const setRef = ref(null);
onMounted(() => {
  if (mode.value === 'edit') {
    productGroupDetail(id.value).then(res => {
      if (res.code == 200) {
        basicObj.value = res.data
         detailObj.value = res.data
        activeKey.value = new Date();
      }
    })
  }
})
const handleSubmit = async () => {
  try {
    loading.value = true;
    if (basicRef.value && !(await basicRef.value.validate())) {
      loading.value = false;
      return;
    }
    if (setRef.value && !(await setRef.value.validate())) {
      loading.value = false;
      return;
    }
    const [basicData, setData] = await Promise.all([
      basicRef.value.collectData(),
      setRef.value.collectData()
    ]);
    const formData = {...basicData, ...setData };
    formData.productDetail = proxy.$h.encodeBase64(formData.productDetail)
    formData.categoryId = Number(formData.categoryId)
    const requestMethod =
      mode.vaule === "add" ? productGroupAdd : productGroupEdit;
    const response = await requestMethod(formData); // 使用 await 处理异步调用
    if (response.code === 200) {
      proxy.$message.success('操作成功');
    }
  } catch (error) {
    console.error('Error submitting form:', error);
  } finally {
    loading.value = false;
  }
}

子组件BasicRef.vue

   <el-form ref="supplement" label-width="160px" :model="form" :rules="rules">
      <el-form-item label="商品组名称" prop="name" style="width: 400px;">
        <el-input v-model="form.name" placeholder="请输入" maxlength="30" />
        <el-text size="small" type="info">
          最多不超过30字符
        </el-text>
      </el-form-item>
      <el-form-item label="封面：">
        <el-space alignment="start" direction="vertical" fill style="width: 100%">
          <image-upload :limit="1" v-model="form.sharePic" />
          <el-text size="small" type="info">
            支持jpeg/jpg/png格式图片，最大不超过2MB，建议尺寸500px*500px
          </el-text>
        </el-space>
      </el-form-item>
    </el-form>
    <script setup>
    const props = defineProps({
  date: {
    type: Object,
  },
  mode: {
    type: String,
    default: "add",
  },
  date:{
    type: Object,
    default: {},
  }
});
const form = ref({
  name: "",
  isVirtual: 1,
  isLogisticsDelivery: 1,
  isSelfPickup: 2,
  radio1: 1
});
onMounted(() => {
  if (props.mode === 'edit') {
    form.value = props.date
  }
});
const validate = (callback) => {
  return new Promise((resolve, reject) => {
    supplement.value.validate(valid => {
      if (valid) {
        resolve(true);
      } else {
        reject(false);
      }
    });
  });
}
const collectData = () => {
  return new Promise(resolve => {
    resolve(toRaw(form.value));
  });
};
const close = () => {
  emit("close");
};
defineExpose({
  validate,
  collectData
});
</script>