vue事件实现

Vue 事件实现方法

模板中直接绑定事件

在 Vue 模板中通过 v-on 或 @ 语法直接绑定事件。例如点击事件：

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

方法定义

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

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

事件修饰符

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

• .stop：阻止事件冒泡
• .prevent：阻止默认行为
• .capture：使用捕获模式
• .self：仅当事件从元素本身触发时执行
• .once：事件只触发一次

  <form @submit.prevent="onSubmit"></form>

按键修饰符

为键盘事件添加特定按键触发条件：

<input @keyup.enter="submitForm" />

自定义事件

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

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

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

事件总线

通过 Vue 实例实现跨组件通信：

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

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

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

原生事件绑定

在组件上监听原生事件需使用 .native 修饰符（Vue 2）或 v-on 的 $listeners（Vue 3）：

<my-component @click.native="doSomething" />

事件参数传递

模板中可显式传递参数和 $event 对象：

<button @click="handleClick('参数', $event)">传递参数</button>