Vue.js 如何在vue3中在`setup`方法外部`emit`事件

在本文中，我们将介绍在Vue3中如何在setup方法外部使用emit方法来发送事件。
在Vue.js中，我们经常使用emit方法来在组件之间传递消息。通常情况下，我们可以在Vue 2.x中的methods中使用this.$emit来触发自定义事件。但是在Vue 3中，由于setup方法的存在，我们需要使用不同的方法来实现相同的功能。

阅读更多：Vue.js 教程

Vue 3中的`setup`方法

在Vue 3中，setup方法是一个在组件实例初始化之前运行的函数。它是Vue 3中新引入的一个特性，并且是使用Composition API的核心。setup方法的主要目的是设置组件的初始状态，为组件提供响应式数据和方法。

在setup方法中，我们可以访问到两个参数：props和context。其中，props参数是组件接收的属性，而context参数包含了一些常用的上下文属性和方法，如attrs、slots和emit。

使用`emit`方法发送事件

在Vue 3中，我们可以通过context.emit来发送事件，而不是使用this.$emit。context.emit方法接受两个参数：事件名称和要传递的数据。下面是一个示例：

import { defineComponent } from 'vue';

export default defineComponent({
  setup(props, context) {
    function handleClick() {
      // 发送事件
      context.emit('customEvent', 'Hello from setup!');
    }

    return {
      handleClick
    };
  }
});

在上面的示例中，我们定义了一个名为handleClick的函数，它将在某个事件触发时被调用。在handleClick函数中，我们使用context.emit来发送一个名为customEvent的自定义事件，并传递了一个字符串Hello from setup!作为事件的数据。

在模板中接收事件

当我们在setup方法中使用context.emit发送事件后，我们需要在组件的模板中接收该事件。在Vue 3中，我们可以使用v-on指令来监听自定义事件。下面是一个示例：

<template>
  <button v-on:customEvent="handleCustomEvent">Click me</button>
</template>

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

export default defineComponent({
  setup() {
    function handleCustomEvent(data) {
      console.log(data); // 输出：Hello from setup!
    }

    return {
      handleCustomEvent
    };
  }
});
</script>

在上面的示例中，我们使用v-on:customEvent指令来监听名为customEvent的自定义事件，并将其绑定到handleCustomEvent方法上。当事件触发时，handleCustomEvent方法将收到传递的数据并输出到控制台上。