vue实现事件监听
Vue 事件监听实现方法
Vue 提供了多种方式实现事件监听，涵盖组件内外交互、原生 DOM 事件处理等场景。以下是核心实现方案：
模板内直接监听
通过 v-on 或 @ 语法监听 DOM 事件：
<button @click="handleClick">点击触发</button>事件处理函数需定义在组件的 methods 中：
methods: {
handleClick(event) {
console.log('事件触发', event.target)
}
}自定义事件监听
子组件通过 $emit 触发事件：
this.$emit('custom-event', payload)父组件通过 v-on 监听：
<child-component @custom-event="handleCustomEvent" />事件修饰符
Vue 提供的事件修饰符可简化常见操作：
<!-- 阻止默认行为 -->
<form @submit.prevent="onSubmit"></form>
<!-- 停止事件冒泡 -->
<div @click.stop="doThis"></div>
<!-- 按键修饰符 -->
<input @keyup.enter="submit" />生命周期钩子监听
在组件生命周期中添加/移除事件监听：
mounted() {
window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
}事件总线模式
创建全局事件中心实现跨组件通信：
// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
// 组件A发送事件
EventBus.$emit('message', data)
// 组件B接收事件
EventBus.$on('message', data => {})第三方库集成
使用 mitt 等轻量事件库：
import mitt from 'mitt'
const emitter = mitt()
// 发送事件
emitter.emit('foo', { a: 'b' })
// 接收事件
emitter.on('foo', e => console.log(e))最佳实践建议
- 组件销毁时需手动移除全局事件监听，避免内存泄漏
- 复杂场景建议使用 Vuex 进行状态管理而非过度依赖事件总线
- 自定义事件名推荐使用 kebab-case 命名（如
user-updated）
