vue3 通过点击父组件中的查询按钮，获取子组件中表单的数据，且子组件中要进行表单校验

可以通过在父组件中引用子组件的方式，获取子组件中表单的数据和进行表单校验。具体实现方式如下：

1. 在父组件中引用子组件，并通过ref获取子组件实例

<template>
  <div>
    <ChildForm ref="childForm"></ChildForm>
    <button @click="handleSubmit">查询</button>
  </div>
</template>

<script>
import ChildForm from "./ChildForm.vue";

export default {
  components: {
    ChildForm,
  },
  methods: {
    handleSubmit() {
      const childFormData = this.$refs.childForm.getFormData();
      const isChildFormValid = this.$refs.childForm.validateForm();
      // 处理获取到的子组件表单数据和校验结果
    },
  },
};
</script>

2. 在子组件中暴露获取表单数据和校验表单的方法，并使用ref引用子组件实例

<template>
  <el-form ref="form" :model="formData" :rules="formRules">
    ...
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {...},
      formRules: {...},
    };
  },
  methods: {
    getFormData() {
      return this.formData;
    },
    validateForm() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            resolve(true);
          } else {
            reject(false);
          }
        });
      });
    },
  },
};
</script>

这样就可以在父组件中通过点击查询按钮获取子组件中的表单数据，并进行表单校验了。