vue事假机制都有哪些

Vue 的事件机制主要包含以下几种类型和方式,可以分为组件内部事件、父子组件通信事件、原生 DOM 事件封装、修饰符增强等,下面详细分类介绍:


一、DOM 事件绑定(最基础的事件)

使用 v-on(或简写 @)指令绑定原生 DOM 事件。

ini 复制代码
<button @click="handleClick">点击我</button>

二、自定义事件(组件通信)

1. 子组件通过 $emit 向父组件传递事件

子组件中:

xml 复制代码
<template>
  <button @click="$emit('custom-event', data)">发送事件</button>
</template>

父组件中:

ini 复制代码
<ChildComponent @custom-event="handleCustomEvent" />

2. 使用 v-model 进行双向绑定(语法糖)

Vue3 中可以绑定自定义 modelValueupdate:modelValue

子组件:

xml 复制代码
<template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>
<script>
export default {
  props: ['modelValue']
}
</script>

父组件:

ini 复制代码
<ChildComponent v-model="inputValue" />

三、事件修饰符

Vue 为事件添加了很多修饰符,用于增强行为:

  • .stop:阻止事件冒泡
  • .prevent:阻止默认行为
  • .capture:使用事件捕获模式
  • .self:只有事件是从绑定元素本身触发才触发
  • .once:事件只触发一次
  • .passive:使用被动监听器,适合滚动性能优化
arduino 复制代码
<button @click.stop.prevent="handleClick">点我</button>

四、键盘事件修饰符

ini 复制代码
<input @keyup.enter="submit" />

还支持 .esc, .tab, .delete, .arrow-up, .space 等等。


五、事件代理(原生方式)

在 Vue 中仍然可以使用事件代理:

ruby 复制代码
<ul @click="handleListClick">
  <li v-for="item in list" :key="item.id" :data-id="item.id">{{ item.name }}</li>
</ul>

六、 <math xmlns="http://www.w3.org/1998/Math/MathML"> o n / on / </math>on/off / $emit(Vue2 中的全局事件总线)

Vue2 可以通过事件总线实现跨组件通信:

php 复制代码
// event-bus.js
export const EventBus = new Vue();

// 发送事件
EventBus.$emit('someEvent', data);

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

// 移除事件
EventBus.$off('someEvent');

⚠️ Vue3 中已经废弃 $on / $off / $emit,推荐使用 mittemitter 等库替代。


七、Vue3 中的事件通信方式

Vue3 推荐使用以下方式进行事件通信:

  • defineEmits()(组合式 API)
  • mitt 第三方事件库
  • provide/inject
  • PiniaVuex 状态管理
  • emits 选项配合 defineProps
ini 复制代码
// 子组件
const emit = defineEmits(['save']);
emit('save', payload);

八、自定义指令事件

Vue 允许你通过自定义指令实现特殊事件处理逻辑:

javascript 复制代码
app.directive('click-outside', {
  mounted(el, binding) {
    document.addEventListener('click', (e) => {
      if (!el.contains(e.target)) {
        binding.value(e)
      }
    });
  }
});

需要我帮你整理一个"Vue 事件机制脑图"或"快速参考表"吗?

相关推荐
Hockor32 分钟前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军33 分钟前
React 实现 useMemo
前端·react.js·前端框架
海底火旺35 分钟前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到1136 分钟前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡37 分钟前
浏览器是否支持webp图像的判断
前端
Xi-Xu38 分钟前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂40 分钟前
😁深入JS(九): 简单了解Fetch使用
前端
杨进军41 分钟前
React 实现多个节点 diff
前端·react.js·前端框架
用户408128120038141 分钟前
拓展运算符和剩余参数
前端
再见了那维莱特44 分钟前
6.29 drilling notes
前端