当前位置：首页 > 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>

事件处理方法

在组件选项中定义方法：

vue事件实现

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

传递参数

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

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

事件修饰符

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

vue事件实现

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

自定义事件

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

this.$emit('custom-event', payload);

父组件监听自定义事件：

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

事件总线（跨组件通信）

创建全局事件总线（适用于非父子组件）：

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

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

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

注意事项

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

标签: 事件 vue

分享给朋友：

vue实现本地数据存储

使用 localStorage 或 sessionStorage Vue 中可以直接调用浏览器提供的 localStorage 或 sessionStorage API 进行数据存储。localSto…

vue实现安全免登录

Vue 实现安全免登录的方案免登录功能通常通过持久化认证状态（如 Token）实现，但需兼顾安全性。以下是基于 Vue 的常见实现方案：基于 Token 的免登录登录成功后存储 Token…

vue实现自定义登录

实现自定义登录的基本步骤在Vue中实现自定义登录功能通常需要结合前端和后端技术。以下是一个基本的实现流程：创建登录表单组件使用Vue的单文件组件创建一个登录表单，包含用户名和密码输入框以及提交…

vue实现拖放

Vue 实现拖放功能 Vue 中实现拖放功能通常可以通过 HTML5 的原生拖放 API 或第三方库（如 vuedraggable）来实现。以下是两种方法的详细说明。使用 HTML5 原生拖放 A…

vue实现muli

Vue 实现多语言（i18n）支持在 Vue 项目中实现多语言（i18n）功能，通常使用 vue-i18n 插件。以下是具体实现步骤：安装 vue-i18n npm install vue-i…

vue router 实现

Vue Router 的实现 Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）。以下是 Vue Router 的核心实现方式。安装 Vue Router 通过…

vue事件实现