当前位置：首页 > 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中实现直播功能，通常需要结合WebRTC、RTMP或HLS等技术。以下是几种常见的实现方式：使用WebRTC实现实时直播 WebRTC适合低延迟的实时直播场景，…

vue实现公式

在Vue中实现公式展示或计算可以通过多种方式实现，以下为具体方法：使用模板插值与计算属性若公式较简单，可直接在模板中使用插值表达式或计算属性。例如计算圆的面积： <templat…

vue实现开关

Vue 实现开关组件的方法使用原生HTML和Vue数据绑定通过v-model绑定复选框的checked状态，结合CSS样式实现开关效果： <template> <label…

vue 实现分屏

Vue 实现分屏的方法使用 CSS Flexbox 或 Grid 布局通过 CSS Flexbox 或 Grid 布局可以轻松实现分屏效果。在 Vue 组件中定义两个或多个区域，并使用 CSS 控…

vue键盘实现

监听键盘事件在Vue中监听键盘事件可以通过v-on指令或@缩写实现。常见的键盘事件包括keydown、keyup和keypress。例如监听回车键事件： <template> &l…

vue工序实现

Vue 工序实现方法在Vue中实现工序（或流程）功能，通常涉及状态管理、组件通信和动态渲染。以下是几种常见方法：使用动态组件通过Vue的<component :is="currentCo…

vue事件实现