vue3 子组件触发父组件事件

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

在父组件中，你可以定义一个事件处理方法，并将其传递给子组件：

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

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

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

在子组件中，通过 `$emit` 方法触发父组件的事件，并传递需要的数据：

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

<script>
export default {
  methods: {
    triggerCustomEvent() {
      // 触发父组件的 custom-event 事件，并传递数据
      this.$emit('custom-event', { data: 'some data' });
    },
  },
};
</script>

当子组件中的按钮被点击时，`triggerCustomEvent` 方法会被调用，并通过 `$emit` 方法触发 `custom-event` 事件，父组件中的 `handleCustomEvent` 方法会被执行，并接收到传递的数据。你可以根据实际需求在父组件的事件处理方法中进行相应的操作。