vue事件如何实现

Vue 事件实现方法

Vue 中事件通过 v-on 指令或 @ 简写实现，支持原生 DOM 事件和自定义事件。

原生 DOM 事件绑定

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

方法定义

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

methods: {
  handleClick(event) {
    console.log('事件触发', event.target);
  }
}

事件修饰符

Vue 提供事件修饰符实现常见功能：

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

<form @submit.prevent="onSubmit">
  <button @click.stop="doThis">阻止冒泡</button>
</form>

自定义事件

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

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

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

事件总线（跨组件通信）

创建全局事件总线：

// main.js
Vue.prototype.$eventBus = new Vue();

// 组件A发送事件
this.$eventBus.$emit('global-event', data);

// 组件B监听事件
this.$eventBus.$on('global-event', data => {
  console.log('接收数据', data);
});

按键修饰符

监听特定按键事件：

<input @keyup.enter="submit" />
<input @keyup.13="submit" /> <!-- 键码方式 -->

系统修饰键

组合键监听：

<button @click.ctrl.exact="onCtrlClick">仅按Ctrl时触发</button>

事件传参

传递额外参数给处理函数：

<button @click="handleClick($event, 'param')">带参数事件</button>

注意事项

1. 事件处理函数默认接收原生 DOM 事件对象作为第一个参数
2. 使用 $emit 触发自定义事件时，第二个参数开始为传递的数据
3. 组件销毁前应移除全局事件监听，避免内存泄漏
4. .sync 修饰符（Vue 2.x）已由 v-model 参数（Vue 3）替代