vue3父组件如何触发子组件的表单验证

在Vue 3中，父组件可以通过使用`ref`或`$refs`来获取子组件的实例，并调用子组件的方法来触发表单验证。

首先，在父组件中，需要使用`ref`来引用子组件。例如，给子组件添加一个`ref`属性：

<template>
  <div>
    <ChildComponent ref="childRef"></ChildComponent>
    <button @click="validateChildForm">验证子组件表单</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    validateChildForm() {
      // 通过$refs获取子组件实例
      const childComponent = this.$refs.childRef;
      // 调用子组件的表单验证方法
      childComponent.validateForm();
    }
  }
}
</script>

然后，在子组件中，需要定义一个表单验证的方法。例如，在子组件的`methods`中添加一个`validateForm`方法：

<template>
  <form>
    <!-- 表单内容 -->
  </form>
</template>

<script>
export default {
  methods: {
    validateForm() {
      // 表单验证逻辑
      // ...
    }
  }
}
</script>

这样，当父组件中的按钮被点击时，会调用父组件的`validateChildForm`方法，该方法通过`$refs`获取到子组件的实例，并调用子组件的`validateForm`方法来触发子组件的表单验证。