当前位置：首页 > VUE

vue如何实现事件处理

2026-01-20 17:52:05VUE

Vue 事件处理基础

Vue 通过 v-on 指令（简写为 @）实现事件绑定。语法格式为 @事件名="处理函数"，处理函数需在 Vue 实例的 methods 中定义。

<template>
  <button @click="handleClick">点击触发</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('事件触发');
    }
  }
}
</script>

传递事件对象

默认情况下，事件处理函数会自动接收原生 DOM 事件对象（event）。若需同时传递自定义参数，使用 $event 显式传递事件对象：

<button @click="handleClick('参数', $event)">传递参数和事件对象</button>

methods: {
  handleClick(arg, event) {
    console.log(arg); // '参数'
    console.log(event.target); // 触发事件的 DOM 元素
  }
}

事件修饰符

Vue 提供事件修饰符简化常见事件处理逻辑，直接通过点语法（.修饰符）使用：

vue如何实现事件处理

.stop：阻止事件冒泡
.prevent：阻止默认行为
.capture：使用捕获模式
.self：仅当事件从元素本身触发时生效
.once：事件只触发一次

<a @click.prevent="handleLinkClick" href="https://example.com">阻止跳转</a>
<form @submit.prevent="handleSubmit">阻止表单默认提交</form>

按键修饰符

监听键盘事件时，可通过按键修饰符指定触发键：

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

支持按键别名（如 .enter、.esc）或直接使用键码（.13，不推荐）。

vue如何实现事件处理

系统修饰键

组合按键可通过 .ctrl、.alt、.shift、.meta（Mac 的 Command 键）实现：

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

自定义事件（子组件向父组件通信）

子组件通过 $emit 触发自定义事件，父组件通过 v-on 监听：

<!-- 子组件 Child.vue -->
<button @click="$emit('custom-event', '数据')">触发事件</button>

<!-- 父组件 -->
<Child @custom-event="handleCustomEvent" />

methods: {
  handleCustomEvent(data) {
    console.log(data); // '数据'
  }
}

事件总线（跨组件通信）

通过空的 Vue 实例作为事件中心，实现非父子组件通信：

// eventBus.js
import Vue from 'vue';
export const eventBus = new Vue();

// 组件 A
eventBus.$emit('event-name', payload);

// 组件 B
eventBus.$on('event-name', (payload) => {
  console.log(payload);
});