详解Vue3中的事件监听方式

news2024/11/27 11:54:14

在这里插入图片描述

本文主要介绍Vue3中的事件监听方式。

一、v-on指令

Vue3中仍然使用v-on指令来绑定事件处理函数。例如，可以使用v-on:click来监听点击事件：

<button v-on:click="handleClick">Click me</button>

在组件的方法中定义事件处理逻辑：

methods: {
  handleClick() {
    console.log('Button clicked');
  }
}

二、使用@符号简写

Vue3中引入了一个新的语法糖，可以使用@符号来代替v-on指令，更加简洁易读。例如，可以使用@click来监听点击事件：

<button @click="handleClick">Click me</button>

三、事件修饰符

Vue3中仍然支持事件修饰符，可以使用.stop、.prevent、.capture和.once来控制事件的行为。例如，可以使用.stop修饰符阻止事件冒泡：

<div @click.stop="handleClick">Click me</div>

四、动态事件名

Vue3中可以使用动态表达式来指定事件名。

例如，可以使用v-bind:动态事件名来动态绑定事件处理函数。动态事件名可以是一个计算属性的结果，或者是一个组件的属性。例如：

<button v-bind:[eventName]="handleClick">{{ buttonText }}</button>

data() {
  return {
    eventName: 'click',
    buttonText: 'Click me',
  }
},
methods: {
  handleClick() {
    console.log('Button clicked');
  }
}

五、常见的监听事件

在Vue3中，有以下几种常见的事件：

点击事件（click）：当元素被点击时触发。
```
<button @click="handleClick">Click me</button>
```
输入事件（input）：当输入框的值发生改变时触发。
```
<input type="text" @input="handleInput" />
```

提交事件（submit）：当表单提交时触发。

<form @submit="handleSubmit">
  <input type="text" />
  <button type="submit">Submit</button>
</form>

鼠标移入事件（mouseenter）：当鼠标移入元素时触发。
```
<div @mouseenter="handleMouseEnter">Mouse Enter</div>
```
鼠标移出事件（mouseleave）：当鼠标移出元素时触发。
```
<div @mouseleave="handleMouseLeave">Mouse Leave</div>
```
键盘事件（keydown、keyup）：当按下或释放键盘上的键时触发。
```
<input type="text" @keydown="handleKeyDown" />
```
聚焦事件（focus）：当元素获得焦点时触发。
```
<input type="text" @focus="handleFocus" />
```
失焦事件（blur）：当元素失去焦点时触发。
```
<input type="text" @blur="handleBlur" />
```

这些只是Vue3中的一些常见事件示例，实际上还有许多其他事件可供使用。

此外，Vue3还支持自定义事件，可以使用$emit方法在组件内触发自定义事件，并在父组件中监听并处理这些事件。

六、自定义事件

Vue3中使用emit方法来触发自定义事件。在父组件中使用v-on监听事件，然后在子组件中使用emit方法触发事件。例如：

<template>
  <button @click="handleClick">Click me</button>
</template>

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

export default {
  emits: ['customEvent'],
  methods: {
    handleClick() {
      this.$emit('customEvent', 'Hello from child component');
    }
  }
}
</script>

父组件中监听自定义事件并处理：

<template>
  <ChildComponent @customEvent="handleCustomEvent" />
</template>

<script>
export default {
  methods: {
    handleCustomEvent(message) {
      console.log(message);
    }
  }
}
</script>