vue3 子组件怎么触发父组件的事件

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

在父组件中，你可以定义一个方法来处理子组件触发的事件：

<template>
  <div>
    <ChildComponent @child-event="handleChildEvent" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(payload) {
      // 在这里处理子组件触发的事件
      console.log(payload);
    }
  }
}
</script>

在子组件中，你可以使用`$emit`方法来触发父组件的事件，并传递需要传递的数据：

<template>
  <button @click="triggerEvent">触发事件</button>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      // 在这里触发父组件的事件，并传递数据
      this.$emit('child-event', { message: 'Hello from child component' });
    }
  }
}
</script>

当子组件中的按钮被点击时，会触发父组件中的`handleChildEvent`方法，并传递数据`{ message: 'Hello from child component' }`。你可以根据需要在父组件中进行相应的处理。