vue3在父组件中点击提交时，获取子组件中的数据并在父组件中进行校验

在 Vue3 中，当你需要在父组件通过点击事件从子组件获取并校验数据时，可以采用以下步骤：

1. **props 通信**：
父组件将需要传递给子组件的数据作为 props 发送给子组件。例如：

   <!-- 父组件 -->
   <child-component :data="parentData" @submit="handleSubmit"></child-component>

子组件接收这个 prop，并在内部处理数据：

   // 子组件 child-component.vue
   export default {
     props: ['data'],
     methods: {
       submit() {
         this.$emit('submit', this.formData); // 在子组件中触发提交事件并传回数据
       }
     }
   }

2. **自定义事件（emitter）**：
父组件监听 `submit` 事件，在触发事件的回调中对数据进行校验：

   // 父组件 parent-component.vue
   methods: {
     handleSubmit(data) {
       if (validateData(data)) { // 验证函数
         // 数据校验成功，处理其他逻辑...
       } else {
         alert('数据无效');
       }
     }
   }

3. **验证函数**：
创建一个验证函数 `validateData` 来检查数据是否满足条件，如数据格式、必填项等。

4. **父子组件间的双向数据绑定**：
如果有需要实时更新的情况，可以考虑使用 `v-model` 或者 `ref` 实现双向数据绑定，但这不是必需的，因为这里仅是单向从子组件到父组件传递数据。

**相关问题--:**
1. Vue3 的 `@submit` 事件是如何工作的？
2. 如何在Vue3中实现数据的双向绑定？
3. 父组件如何防止子组件多次触发提交事件并影响数据校验？