详解Vue3中的事件监听

2023-12-29 09:28:17

在这里插入图片描述

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

在Vue3中,事件监听的方式与Vue2有一些不同。

下面是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中,有以下几种常见的事件:

  1. 点击事件(click):当元素被点击时触发。

    <button @click="handleClick">Click me</button>
    
  2. 输入事件(input):当输入框的值发生改变时触发。

    <input type="text" @input="handleInput" />
    
  3. 提交事件(submit):当表单提交时触发。

    <form @submit="handleSubmit">
      <input type="text" />
      <button type="submit">Submit</button>
    </form>
    
  4. 鼠标移入事件(mouseenter):当鼠标移入元素时触发。

    <div @mouseenter="handleMouseEnter">Mouse Enter</div>
    
  5. 鼠标移出事件(mouseleave):当鼠标移出元素时触发。

    <div @mouseleave="handleMouseLeave">Mouse Leave</div>
    
  6. 键盘事件(keydown、keyup):当按下或释放键盘上的键时触发。

    <input type="text" @keydown="handleKeyDown" />
    
  7. 聚焦事件(focus):当元素获得焦点时触发。

    <input type="text" @focus="handleFocus" />
    
  8. 失焦事件(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>

在Vue3中,事件处理的方式基本与Vue2保持一致,但引入了一些新的语法糖,如@符号简写和动态事件名。同时,Vue3还支持自定义事件的触发和监听。这些改进使得事件处理更加简洁和灵活。

文章来源:https://blog.csdn.net/aahwj/article/details/135257931
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。