vue3在class类中定义事件

在 Vue 3 中，尽管官方推荐使用Composition API而不是传统的组件选项（如`data`, `methods`等），但是如果你仍然想要在 class 类中定义事件处理，你可以使用 `setup()` 函数。`setup()` 是 Composition API的一部分，它允许你在类组件中设置响应式数据以及副作用，包括事件监听。

以下是一个简单的例子：

import { onMounted } from 'vue';

export default {
  setup() {
    // 定义一个局部变量并监听其变化
    const message = ref('Hello, Vue!');

    // 使用onMounted钩子来在组件挂载后立即运行函数
    onMounted(() => {
      // 在这里添加事件处理器
      document.body.addEventListener('click', (event) => {
        console.log(`Clicked at position: ${event.clientX}, ${event.clientY}`);
        // 或者直接绑定自定义事件，例如 @my-event="handleEvent"
        this.$emit('my-event', event);
      });
      
      // 自定义事件处理器
      function handleEvent(event) {
        message.value = `You clicked at ${event.clientX}, ${event.clientY}`;
      }
    });

    return { message };
  },
};

在这个例子中，我们创建了一个名为`message`的响应式属性，并在`onMounted`钩子内添加了点击事件的处理器。当用户点击时，控制台会打印位置信息，并通过`$emit`触发自定义事件`my-event`。