vue实现事件监听处理

Vue 事件监听实现方式

Vue 提供了多种方式实现事件监听，适用于不同场景。

模板内直接监听 在模板中使用 v-on 或简写 @ 绑定事件：

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

对应方法需在组件的 methods 中定义：

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

自定义事件监听 父子组件间通过 $emit 和 v-on 通信：

<!-- 子组件 -->
<button @click="$emit('custom-event', payload)">触发事件</button>

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

生命周期钩子监听 在组件生命周期中手动添加/移除事件监听：

mounted() {
  window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize)
}

事件总线模式 创建全局事件总线（适合非父子组件通信）：

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

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

// 组件B监听事件
this.$eventBus.$on('global-event', this.handleGlobalEvent)

修饰符使用 Vue 提供事件修饰符简化常见操作：

<form @submit.prevent="onSubmit"></form>
<button @click.stop="doThis"></button>
<div @scroll.passive="onScroll"></div>

注意事项

• 组件销毁前需手动移除全局事件监听
• 事件总线适用于小型应用，复杂场景建议使用 Vuex
• .passive 修饰符能提升移动端滚动性能
• 避免在模板中编写复杂逻辑，应封装到 methods 中