在 Vue 3 中，如何在 setup 方法里向外触发事件？

在Vue 3中，使用组合式 API（Composition API）时，setup方法是一个非常核心的概念。在这个方法里，我们可以定义响应式的数据、计算属性、函数等。当需要从setup函数中发出事件时，我们需要使用到context.emit。

以下是具体步骤和示例：

1. 导入defineComponent：首先确保我们使用defineComponent来定义组件，这样TypeScript可以更好地推断类型。

2. 在setup函数中接受context参数：setup函数接受两个参数，第一个是props，第二是context。context对象包含了一些有用的属性，比如emit用于触发事件。

3. 使用context.emit发出事件：你可以通过context.emit方法发出自定义事件，并将所需的数据作为参数传递。

下面是一个具体的例子：

vue
<template>
  <button @click="sendEvent">点击我发出事件</button>
</template>

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

export default defineComponent({
  setup(props, { emit }) {
    // 定义一个函数，用来触发事件
    const sendEvent = () => {
      emit('custom-event', { message: 'Hello from setup!' });
    };

    // 将函数暴露给模板
    return {
      sendEvent
    };
  }
});
</script>

在这个例子中，我们创建了一个按钮，当按钮被点击时会触发sendEvent函数。这个函数使用emit来发出名为custom-event的事件，并附带数据{ message: 'Hello from setup!' }。在组件的父级，你可以监听这个事件：

vue
<template>
  <ChildComponent @custom-event="handleEvent" />
</template>

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

export default {
  methods: {
    handleEvent(eventData) {
      console.log('事件被触发了:', eventData.message);
    }
  }
}
</script>

在这段父组件的代码中，我们监听了ChildComponent发出的custom-event事件，并定义了handleEvent方法来处理这个事件。当事件被触发时，我们可以在控制台看到传递的消息。这就是在Vue 3的setup方法中如何发出事件的方式。