vue实现事件监听

Vue 事件监听实现方法

Vue 提供了多种方式实现事件监听，以下是常见方法：

v-on 指令 使用 v-on 指令绑定事件监听器，语法为 v-on:事件名="处理方法" 或简写为 @事件名="处理方法"：

<button v-on:click="handleClick">点击</button>
<button @click="handleClick">简写点击</button>

methods 中定义处理方法 在 Vue 实例的 methods 选项中定义事件处理方法：

methods: {
  handleClick(event) {
    console.log('按钮被点击', event)
  }
}

内联处理器 可以直接在模板中使用 JavaScript 表达式：

<button @click="count++">增加计数</button>

事件修饰符 Vue 提供事件修饰符实现常见 DOM 事件处理需求：

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

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

<!-- 事件只触发一次 -->
<button @click.once="doThis"></button>

按键修饰符 监听特定按键事件：

<input @keyup.enter="submit" />
<input @keyup.13="submit" /> <!-- 使用 keyCode -->

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

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

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

生命周期钩子 在组件生命周期中监听内部事件：

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

事件总线 对于非父子组件通信，可以使用事件总线：

// 创建事件总线
const EventBus = new Vue()

// 发送事件
EventBus.$emit('event-name', data)

// 接收事件
EventBus.$on('event-name', data => {
  // 处理数据
})

注意事项

• 组件销毁时应移除全局事件监听避免内存泄漏
• 事件处理函数应尽可能简单，复杂逻辑建议提取到方法中
• 自定义事件名建议使用 kebab-case 命名方式
• 避免在模板中编写复杂逻辑，保持模板简洁