vue3在class类中定义事件
时间: 2024-09-24 08:30:29 浏览: 46
在vue中动态添加class类进行显示隐藏实例
在 Vue 3 中,尽管官方推荐使用Composition API而不是传统的组件选项(如`data`, `methods`等),但是如果你仍然想要在 class 类中定义事件处理,你可以使用 `setup()` 函数。`setup()` 是 Composition API的一部分,它允许你在类组件中设置响应式数据以及副作用,包括事件监听。
以下是一个简单的例子:
```javascript
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`。
阅读全文