vue实现事件绑定

Vue 事件绑定实现方法

Vue 提供了多种方式实现事件绑定，以下是常用方法：

v-on 指令 使用 v-on 指令绑定事件监听器，语法为 v-on:event="handler" 或简写为 @event="handler"。事件处理程序可以是一个方法名或内联 JavaScript 语句。

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

方法处理器 在 Vue 实例的 methods 选项中定义方法，通过 v-on 指令调用。

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" /> <!-- 使用键码 -->

系统修饰键 处理 Ctrl、Alt、Shift 等系统修饰键的组合事件。

<div @click.ctrl="doSomething">按住 Ctrl 点击</div>

鼠标按钮修饰符 限定特定的鼠标按钮触发事件。

<div @click.right="showContextMenu">右键点击</div>

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

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

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

事件总线 对于非父子组件通信，可以创建事件总线。

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

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

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

原生事件绑定 如果需要访问原生 DOM 事件，可以使用 $event 变量。

<button @click="handleClick($event)">传递原生事件</button>

动态事件名 Vue 2.6.0+ 支持动态事件名绑定。

<button @[eventName]="handler">动态事件</button>

这些方法覆盖了 Vue 中事件绑定的主要场景，根据具体需求选择合适的方式实现交互功能。