vue3子组件触发父组件

在Vue3中，子组件可以通过自定义事件来触发父组件的方法。具体的步骤如下：

1. 在子组件中，使用 `emits` 选项来声明子组件可触发的事件，例如：

// ChildComponent.vue
<script>
  import { defineEmits } from 'vue';

  export default {
    emits: ['eventName'],
    // ...
  };
</script>

2. 在子组件中，使用 `context.emit` 方法来触发自定义事件，例如：

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

<script>
  export default {
    // ...
    methods: {
      triggerEvent() {
        this.$emit('eventName', eventData);
      },
    },
  };
</script>

3. 在父组件中，使用 `v-on` 或 `@` 来监听子组件触发的事件，并调用相应的方法，例如：

// ParentComponent.vue
<template>
  <child-component @eventName="handleEvent"></child-component>
</template>

<script>
  export default {
    // ...
    methods: {
      handleEvent(eventData) {
        // 处理事件的方法
      },
    },
  };
</script>

这样，当子组件触发 `eventName` 事件时，父组件中的 `handleEvent` 方法将会被调用，并传递相应的数据。