当前位置：首页 > VUE

vue事件实现

2026-03-07 11:51:25VUE

Vue 事件实现

Vue 的事件系统基于 v-on 指令（或简写为 @）实现，支持原生 DOM 事件和自定义事件。以下是核心实现方式：

绑定 DOM 事件

在模板中通过 v-on 监听原生事件，触发组件方法：

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

事件处理方法

在组件选项中定义方法：

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

传递参数

需要传递参数时，使用内联语句：

<button @click="handleClick('参数', $event)">带参数点击</button>

事件修饰符

Vue 提供修饰符简化事件处理：

.stop：调用 event.stopPropagation()
.prevent：调用 event.preventDefault()
.native：监听组件根元素的原生事件
```
<form @submit.prevent="onSubmit"></form>
```

自定义事件

子组件通过 $emit 触发事件：

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) => {
  console.log(data);
});

注意事项

组件销毁前需通过 EventBus.$off() 解绑事件避免内存泄漏
Vue 3 推荐使用 mitt 等第三方库替代事件总线

标签: 事件 vue

分享给朋友：

vue评分实现

Vue 评分组件实现方法使用第三方库（如 Element UI）安装 Element UI： npm install element-ui 引入并注册组件： import Vue from '…

vue实现modal

Vue 实现 Modal 弹窗组件使用 Vue 实现 Modal 弹窗组件可以通过多种方式，包括原生 Vue 组件、第三方库或自定义指令。以下是几种常见方法：原生 Vue 组件实现创建一个基础…

vue实现cs

Vue 实现 CS（Client-Side）渲染的常见方法 Vue.js 是一个用于构建用户界面的渐进式框架，默认采用客户端渲染（CSR）。以下是几种常见的实现方式：使用 Vue CLI 创建项目…

tabbar 实现 vue

在 Vue 中实现 TabBar 功能可以通过多种方式完成，以下是几种常见的方法：使用 Vue Router 结合自定义组件创建一个自定义的 TabBar 组件，结合 Vue Router 实现…

vue实现编辑

Vue 实现编辑功能在 Vue 中实现编辑功能通常涉及表单绑定、状态管理和事件处理。以下是一个常见的实现方法：双向数据绑定使用 v-model 指令实现表单元素与数据的双向绑定： <i…

vue实现groupbox

Vue 实现 GroupBox 组件在 Vue 中实现类似 GroupBox 的效果可以通过自定义组件完成。GroupBox 通常是一个带有标题的边框容器，用于将相关控件分组显示。基本实现方法…

vue事件实现