当前位置：首页 > VUE

vue事件实现

2026-02-10 12:01:37VUE

Vue 事件实现方法

Vue 中事件处理主要通过 v-on 指令（或简写为 @）实现，用于监听 DOM 事件并执行对应的逻辑。以下是核心实现方式：

内联事件处理

直接在模板中调用方法或编写简单逻辑：

<button @click="count++">增加计数</button>
<button @click="showAlert('Hello')">弹出提示</button>

方法事件处理

在 methods 中定义方法并在模板中绑定：

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

methods: {
  handleClick(event) {
    console.log(event.target.tagName);
    this.count += 1;
  }
}

事件修饰符

Vue 提供修饰符简化事件处理：

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

示例：

<form @submit.prevent="onSubmit"></form>
<a @click.stop.prevent="doSomething"></a>

按键修饰符

监听特定按键事件：

<input @keyup.enter="submit" />
<input @keyup.page-down="onPageDown" />

系统修饰键

组合键触发事件：

<button @click.ctrl.exact="onCtrlClick">仅Ctrl+点击触发</button>
<input @keyup.alt.67="clearInput" />

自定义事件（子组件触发父组件）

子组件通过 $emit 触发事件：

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

父组件监听：

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

事件总线（跨组件通信）

创建全局事件中心：

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

组件A发送事件：

EventBus.$emit('update-data', data);

组件B接收事件：

vue事件实现

EventBus.$on('update-data', data => {
  console.log(data);
});

注意事项

事件方法应避免使用箭头函数，否则 this 指向会出错
复杂逻辑建议拆分为独立方法
组件销毁前需用 EventBus.$off() 移除监听器防止内存泄漏

标签: 事件 vue

分享给朋友：

vue实现年历

Vue 实现年历的方法使用 Vue 实现年历可以通过组件化开发方式，结合日期计算和动态渲染完成。以下是两种常见的实现方式：基于原生 Vue 的日历组件创建 Calendar.vue 组件文件，…

vue 实现弹窗

Vue 实现弹窗的方法在 Vue 中实现弹窗功能可以通过多种方式完成，以下是几种常见的方法：使用组件和 v-if/v-show 控制显示创建一个独立的弹窗组件，通过 v-if 或 v-show…

vue 实现赋值

Vue 实现赋值的方法在 Vue 中，赋值操作通常涉及数据绑定和响应式更新。以下是几种常见的赋值方式：直接赋值给 data 属性在 Vue 实例的 data 对象中定义的属性可以直接通过 th…

vue实现select

Vue 实现 Select 组件的方法在 Vue 中实现 Select 组件可以通过多种方式完成，以下是几种常见的方法：使用原生 HTML select 元素原生 HTML 的 <sel…

vue实现mvvm

Vue 实现 MVVM 模式 MVVM（Model-View-ViewModel）是一种前端架构模式，Vue 是其典型实现之一。MVVM 的核心是通过数据绑定和响应式系统实现视图与数据的自动同步。…

vue实现按钮

Vue 实现按钮的方法使用原生 HTML 按钮在 Vue 模板中可以直接使用 HTML 的 <button> 元素，通过 v-on 或 @ 绑定点击事件。 <template&…

vue事件实现