vue3 子组件调用父组件方法

在 Vue3 中，子组件可以通过 `emit` 方法向父组件发送消息，父组件可以通过 `@eventName` 的形式监听子组件的消息并执行相应的方法。以下是一个示例：

父组件代码：

<template>
  <div>
    <ChildComponent @childEvent="handleChildEvent"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  methods: {
    handleChildEvent(param) {
      console.log(param);
      // 执行相应的方法
    },
  },
};
</script>

子组件代码：

<template>
  <div>
    <button @click="handleClick">点击我向父组件发送消息</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    handleClick() {
      this.$emit('childEvent', '我是子组件发送的消息');
    },
  },
});
</script>

当子组件中的按钮被点击时，会向父组件发送名为 `childEvent` 的事件，并且传递了一个参数。父组件可以通过 `@childEvent` 的方式监听该事件，并执行相应的方法，同时可以获取到子组件传递的参数。