当前位置：首页 > 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：提升滚动性能

示例：

vue事件实现

<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 触发事件：

vue事件实现

// 子组件
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接收事件：

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

注意事项

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

标签: 事件 vue

分享给朋友：

vue公共列表的实现

实现 Vue 公共列表组件公共列表组件通常用于展示重复结构的数据，例如商品列表、用户列表等。以下是一个典型的实现方式：基础实现创建可复用的列表组件 List.vue： <tem…

vue实现密码框的包

Vue 密码框实现方案在 Vue 中实现密码框功能，可以通过原生 HTML 结合 Vue 指令或使用第三方组件库完成。以下是几种常见方案：原生 HTML + Vue 双向绑定 <t…

实现vue模版

Vue 模板的基本结构 Vue 模板基于 HTML 语法，通过 Vue 的指令和插值实现动态渲染。以下是一个基础模板示例： <template> <div id="app…

jq 实现 vue

jq 实现 Vue 的核心功能 jq 是一个轻量级的 JavaScript 库，主要用于 DOM 操作和事件处理。虽然它不能完全替代 Vue，但可以通过一些技巧模拟 Vue 的核心功能，如数据绑定、事…

vue实现grid

Vue 实现 Grid 布局的方法使用 CSS Grid 布局 Vue 可以结合 CSS Grid 布局实现灵活的网格系统。CSS Grid 是现代浏览器原生支持的布局方案，无需额外依赖库。 &…

vue实现suspense

Vue 3 中实现 Suspense Suspense 是 Vue 3 引入的一个内置组件，用于处理异步依赖的加载状态。它允许在等待异步组件或异步数据加载时显示一个后备内容（fallback），直到异…

vue事件实现