Vue如何在提交表单时触发子组件

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <!-- 表单内容 -->
      <child-component @submit-form="handleSubmit"></child-component>
      <button type="submit">提交表单</button>
    </form>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleSubmit() {
      // 处理表单提交逻辑
    }
  }
}
</script>

<template>
  <div>
    <!-- 子组件内容 -->
    <button @click="$emit('submit-form')">提交表单</button>
  </div>
</template>

<script>
export default {
  // 子组件逻辑
}
</script>