vue3中子组件调用父组件的方法

在 Vue3 中，子组件可以通过 `emit` 方法向父组件触发自定义事件，从而调用父组件的方法。以下是一个示例：

父组件：

<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent() {
      console.log('Custom event emitted from child component')
    }
  }
}
</script>

子组件：

<template>
  <div>
    <button @click="emitCustomEvent">Emit Custom Event</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      this.$emit('custom-event')
    }
  }
}
</script>

在子组件中，通过 `this.$emit` 方法触发了一个名为 `custom-event` 的自定义事件，父组件在子组件上监听该事件，并在触发时调用 `handleCustomEvent` 方法。