vue3+ts 通过点击父组件中的查询按钮，获取子组件中表单的数据，且子组件中要进行表单校验，给的代码详细一点儿

好的，下面是一个示例代码：

父组件模板代码：

<template>
  <div>
    <child-form ref="childForm"></child-form>
    <button @click="submit">查询</button>
  </div>
</template>

父组件的 `submit` 方法：

import { defineComponent } from 'vue'
import { ChildForm } from './components/ChildForm.vue'

export default defineComponent({
  components: { ChildForm },
  methods: {
    submit() {
      this.$refs.childForm.validate((valid: boolean) => {
        if (valid) {
          const formData = this.$refs.childForm.getFormData()
          // TODO: 使用获取到的表单数据进行查询操作
        } else {
          console.log('表单校验不通过')
        }
      })
    }
  }
})

子组件代码：

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
    <el-form-item label="名称" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model.number="form.age"></el-input>
    </el-form-item>
  </el-form>
</template>

子组件的 `validate` 和 `getFormData` 方法：

import { defineComponent } from 'vue'
import { ElForm } from 'element-plus'

export default defineComponent({
  components: { ElForm },
  data() {
    return {
      form: {
        name: '',
        age: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字值', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    validate(callback: (valid: boolean) => void) {
      this.$refs.form.validate(callback)
    },
    getFormData() {
      return this.form
    }
  }
})

以上代码中，父组件中通过 `this.$refs.childForm` 获取子组件实例，并调用其 `validate` 和 `getFormData` 方法，子组件中引入了 `ElForm` 组件，并调用其 `validate` 方法进行表单校验。同时，子组件中定义了 `data` 数据和校验规则，父组件通过调用 `getFormData` 方法获取表单数据。具体实现方式可以根据实际需求进行调整。