vue3子调用父组件的方法

在Vue 3中，子组件可以通过$emit来调用父组件的方法。下面是一个示例：

// 父组件
<template>
  <div>
    <ChildComponent @customEvent="handleCustomEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleCustomEvent() {
      // 处理自定义事件的方法
      console.log('父组件的方法被调用了');
    },
  },
};
</script>

// 子组件
<template>
  <button @click="emitCustomEvent">调用父组件方法</button>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      this.$emit('customEvent');
    },
  },
};
</script>

在上面的示例中，子组件中的按钮被点击时，会调用`emitCustomEvent`方法，该方法通过`this.$emit`来触发名为`customEvent`的自定义事件。父组件中通过`@customEvent`监听到该自定义事件，并调用`handleCustomEvent`方法进行处理。