父组件校验子组件表单

可以通过在父组件中引入子组件的 ref，然后在父组件中定义一个方法，通过 ref 获取子组件的表单数据，进行校验。具体实现步骤如下：

1. 在父组件中引入子组件，并定义 ref：

<template>
  <div>
    <ChildForm ref="childForm" />
    <button @click="submit">提交</button>
  </div>
</template>

<script>
import ChildForm from './ChildForm.vue'

export default {
  components: {
    ChildForm
  },
  methods: {
    submit() {
      const childForm = this.$refs.childForm
      const formData = childForm.getFormData()
      // 校验 formData
    }
  }
}
</script>

2. 在子组件中定义 getFormData 方法，用于获取表单数据：

<template>
  <form>
    <input type="text" v-model="name" />
    <input type="text" v-model="age" />
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: ''
    }
  },
  methods: {
    getFormData() {
      return {
        name: this.name,
        age: this.age
      }
    }
  }
}
</script>