vue实现事件监听

Vue 事件监听实现方法

在 Vue 中实现事件监听主要通过 v-on 指令或 @ 缩写语法完成，支持原生 DOM 事件和自定义事件。以下是具体实现方式：

1. 模板中直接监听 DOM 事件

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

2. 监听组件自定义事件 子组件通过 $emit 触发事件：

// ChildComponent.vue
this.$emit('custom-event', payload)

父组件监听：

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

3. 事件修饰符 Vue 提供特殊修饰符简化事件处理：

<!-- 阻止默认行为 -->
<form @submit.prevent="onSubmit"></form>

<!-- 停止事件冒泡 -->
<div @click.stop="doThis"></div>

<!-- 按键修饰符 -->
<input @keyup.enter="submit" />

4. 方法定义 在组件选项中定义处理方法：

methods: {
  handleClick(event) {
    console.log(event.target)
  },
  handleCustomEvent(payload) {
    console.log(payload)
  }
}

5. 生命周期钩子中手动监听 在 mounted 钩子添加原生事件监听：

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

6. 事件总线模式（跨组件通信） 创建事件总线实例：

// eventBus.js
import Vue from 'vue'
export default new Vue()

组件A发送事件：

eventBus.$emit('global-event', data)

组件B监听事件：

eventBus.$on('global-event', this.handleGlobalEvent)

注意事项

• 自定义事件名建议使用 kebab-case 命名
• 组件销毁前需移除手动添加的事件监听
• 事件总线适用于简单场景，复杂状态管理建议使用 Vuex