当前位置：首页 > VUE

vue如何实现事件处理

2026-02-21 09:38:00VUE

Vue 事件处理基础

Vue 通过 v-on 指令（简写为 @）实现事件绑定。语法格式为 v-on:事件名="处理函数" 或 @事件名="处理函数"。例如点击事件：

<button v-on:click="handleClick">点击</button>
<!-- 简写形式 -->
<button @click="handleClick">点击</button>

在 Vue 实例的 methods 中定义事件处理函数：

methods: {
  handleClick() {
    console.log('按钮被点击');
  }
}

事件修饰符

Vue 提供事件修饰符，用于简化常见事件处理逻辑：

.stop：阻止事件冒泡

<button @click.stop="handleClick">不会冒泡</button>

.prevent：阻止默认行为

<form @submit.prevent="onSubmit">阻止表单提交</form>

.capture：使用捕获模式
.self：仅当事件从元素本身触发时执行
.once：事件只触发一次
.passive：提升滚动性能

多个修饰符可串联使用：

<a @click.stop.prevent="handleLink">阻止默认且停止冒泡</a>

按键修饰符

处理键盘事件时，可使用特定按键修饰符：

<input @keyup.enter="submit" placeholder="按回车提交">

常用按键别名包括 .enter、.tab、.delete、.esc、.space、.up、.down、.left、.right。

系统修饰键

组合键可通过 .ctrl、.alt、.shift、.meta 处理：

<button @click.ctrl="handleCtrlClick">需按住Ctrl点击</button>

鼠标按钮修饰符

.left、.right、.middle 指定鼠标按键：

vue如何实现事件处理

<button @click.right="handleRightClick">右键点击</button>

自定义事件

子组件通过 $emit 触发自定义事件：

// 子组件
this.$emit('custom-event', payload)

父组件通过 v-on 监听：

<child-component @custom-event="handleCustomEvent"></child-component>

事件总线（Event Bus）

创建全局事件总线实现非父子组件通信：

// 创建Event Bus
const bus = new Vue()

// 发送事件
bus.$emit('event-name', data)

// 接收事件
bus.$on('event-name', (data) => {
  // 处理逻辑
})

原生事件绑定组件

在组件上监听原生事件需添加 .native 修饰符：

<my-component @click.native="handleClick"></my-component>

Vue 3 中该修饰符已被移除，需使用 emits 选项显式声明事件。

事件处理中的 this 指向

methods 中的函数自动绑定当前 Vue 实例，箭头函数会改变 this 指向，应避免使用：

methods: {
  // 正确写法
  handleClick() {
    this.message = 'Clicked' // this 指向Vue实例
  },

  // 错误写法（箭头函数）
  badHandleClick: () => {
    this.message = 'Error' // this 不再指向Vue实例
  }
}

标签: 如何实现事件

分享给朋友：