Vue 3 中的原生事件监听与组件事件处理详解

server/2024/11/17 9:43:21/
webkit-tap-highlight-color: rgba(0, 0, 0, 0);">

Vue 3 中的原生事件监听与组件事件处理完全指南

在 Vue 3 中,事件监听和事件处理是组件交互中的关键部分。Vue 提供了一套简单而强大的事件处理机制,可以方便地监听 DOM 原生事件和组件自定义事件。本篇文章将详细介绍 Vue 3 中事件的使用,包括如何监听原生事件、绑定事件处理函数、使用事件修饰符、在子组件中触发事件,以及 <script setup> 语法糖的应用。


一、原生事件监听

在 Vue 3 中,我们可以使用 v-on 指令来监听原生 DOM 事件。v-on 指令也可以缩写为 @,使得代码更加简洁。

1. 基本用法

绑定事件时,可以直接将事件名称传入 v-on 指令,并在后面跟随事件处理函数。例如,监听 click 事件:

<template><button @click="handleClick">点击我</button>
</template><script setup>
import { ref } from 'vue';const count = ref(0);function handleClick() {count.value++;console.log("按钮点击次数:", count.value);
}
</script>

解释:

  • @click="handleClick" 表示绑定 click 事件,事件触发时会调用 handleClick 函数。
  • handleClick 函数中,我们通过 count.value++ 来增加点击计数。

2. 传递事件参数

有时我们需要传递参数给事件处理函数。可以直接在事件处理函数调用时传入参数。

<template><button @click="handleClick('hello')">点击我</button>
</template><script setup>
function handleClick(message) {console.log("传递的参数:", message);
}
</script>

解释:

  • @click="handleClick('hello')" 表示点击按钮时调用 handleClick,并将 'hello' 作为参数传入。

3. 访问事件对象

如果需要访问事件对象,可以通过 $event 关键字获取。

<template><button @click="handleClick($event)">点击获取事件对象</button>
</template><script setup>
function handleClick(event) {console.log("事件对象:", event);
}
</script>

解释:

  • @click="handleClick($event)" 中的 $event 代表原生事件对象。

二、事件修饰符

Vue 提供了多个事件修饰符,使事件处理更加灵活和方便。常用的修饰符包括 .stop.prevent.capture.self.once.passive

1. .stop:阻止事件冒泡

使用 .stop 可以阻止事件冒泡到父级元素。

<template><div @click="outerClick"><button @click.stop="innerClick">阻止冒泡</button></div>
</template><script setup>
function outerClick() {console.log("外层元素被点击");
}function innerClick() {console.log("内层按钮被点击");
}
</script>

解释:

  • 点击按钮时,innerClick 会触发,且不会冒泡到外层的 div 上。

2. .prevent:阻止默认行为

使用 .prevent 可以阻止元素的默认行为,例如阻止表单提交或链接跳转。

<template><form @submit.prevent="handleSubmit"><button type="submit">提交</button></form>
</template><script setup>
function handleSubmit() {console.log("表单提交被阻止");
}
</script>

解释:

  • 使用 .prevent 修饰符阻止表单的默认提交行为。

3. .once:事件只触发一次

使用 .once 修饰符,事件只会触发一次,之后自动解绑。

<template><button @click.once="handleClick">点击一次</button>
</template><script setup>
function handleClick() {console.log("按钮只会被点击一次");
}
</script>

解释:

  • 第一次点击按钮时,handleClick 会被调用,之后的点击将不再触发该事件。

4. 其他修饰符

  • .self:仅在事件从自身触发时才执行。
  • .capture:使用事件捕获模式。
  • .passive:为事件添加 passive 修饰符,一般用于滚动事件监听。

三、子组件事件传递

在组件化开发中,我们通常会在子组件中触发事件,然后通过 emit 将事件传递给父组件处理。Vue 3 中的 emit 使用更为简洁,同时可以与 <script setup> 结合,提升开发体验。

1. 子组件触发事件

在子组件中使用 emit 触发自定义事件,首先要引入 defineEmits

ChildComponent.vue

<template><button @click="sendEvent">发送事件</button>
</template><script setup>
const emit = defineEmits();function sendEvent() {emit('customEvent', 'Hello from Child');
}
</script>

解释:

  • emit('customEvent', 'Hello from Child') 会触发名为 customEvent 的事件,并传递消息 'Hello from Child'

2. 父组件监听子组件事件

父组件可以通过 v-on@ 监听子组件触发的事件,并接收传递的参数。

ParentComponent.vue

<template><ChildComponent @customEvent="handleCustomEvent" />
</template><script setup>
import ChildComponent from './ChildComponent.vue';function handleCustomEvent(message) {console.log("接收到的消息:", message);
}
</script>

解释:

  • @customEvent="handleCustomEvent" 监听子组件触发的 customEvent 事件,并调用 handleCustomEvent 处理该事件。

四、传递事件给子组件

有时我们希望在父组件中监听子组件的原生事件(如 click),可以使用 .native 修饰符。

不过在 Vue 3 中,官方已经不再推荐使用 .native。取而代之的是直接在组件中监听事件,这会自动处理绑定到最外层元素的原生事件。

示例:直接监听子组件的原生点击事件

ChildComponent.vue

<template><button>子组件按钮</button>
</template><script setup>
</script>

ParentComponent.vue

<template><!-- 直接监听子组件的 click 事件 --><ChildComponent @click="handleChildClick" />
</template><script setup>
import ChildComponent from './ChildComponent.vue';function handleChildClick() {console.log("子组件按钮被点击");
}
</script>

解释:

  • 父组件通过 @click="handleChildClick" 监听子组件的 click 事件,无需额外的 .native 修饰符。

五、给所有事件动态绑定处理函数

在某些场景中,我们需要给组件的所有事件动态地绑定处理函数。可以通过 v-on="object" 的语法,将一个包含事件处理函数的对象绑定到组件上。

<template><ChildComponent v-on="listeners" />
</template><script setup>
import { reactive } from 'vue';
import ChildComponent from './ChildComponent.vue';const listeners = reactive({click: () => console.log("子组件被点击"),mouseover: () => console.log("鼠标移入子组件")
});
</script>

解释:

  • v-on="listeners" 会将 listeners 对象中的所有事件绑定到 ChildComponent 上。

六、总结

本文详细介绍了 Vue 3 中的事件监听与处理,包括原生事件监听、事件修饰符、子组件事件传递与监听,以及动态绑定事件的用法。掌握这些事件处理技巧可以更灵活地实现组件间的交互,提高代码的可读性和复用性。在 Vue 3 中,配合 <script setup> 语法糖,可以让代码更加简洁易读,使开发体验更流畅。


http://www.ppmy.cn/server/142620.html

相关文章

鸿蒙next版开发:ArkTS组件通用属性(文本通用)

在HarmonyOS 5.0中&#xff0c;ArkTS提供了一系列的文本通用属性&#xff0c;这些属性可以应用于文本组件&#xff0c;以实现丰富的文本显示和样式效果。本文将详细解读这些通用属性&#xff0c;并提供示例代码进行说明。 文本通用属性 textAlign属性 textAlign属性用于设置…

windows C#-创建记录类型(下)

定义编译器合成方法 代码将计算该时间段内正确的采暖和制冷度日数。 但此示例展示了为何需要替换记录的某些合成方法。 可以在记录类型中声明你自己的版本的任意编译器合成方法(clone 方法除外)。 clone 方法具有编译器生成的名称&#xff0c;你无法提供其他实现。 这些合成方…

使用机器学习优化数据库查询性能

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用机器学习优化数据库查询性能 文章目录 使用机器学习优化数据库查询性能引言数据库查询性能概述查询优化的重要性 机器学习在…

selinux和防火墙

selinux selinux的说明 SELinux 是 Security-Enhanced Linux 的缩写&#xff0c;意思是安全强化的 linux 。 SELinux 主要由美国国家安全局&#xff08; NSA &#xff09;开发&#xff0c;当初开发的目的是为了避免资源的误用。 系统资源都是通过程序进行访问的&#xff0c…

Mac 使用mac 原生工具将mp4视频文件提取其中的 mp3 音频文件

简介 Hello! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专业,获得过国家奖学金,有幸在竞赛中拿过一些国奖、省奖…已保研 学习经验:扎实基础 + 多做笔…

HTML5实现俄罗斯方块小游戏

文章目录 1.设计来源1.1 主界面1.2 皮肤风格1.2 游戏中界面1.3 游戏结束界面 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/143788449 HTML5实现俄罗斯方块小游戏&#x…

GESP4级考试语法知识(贪心算法(五))

装箱问题1代码&#xff1a; #include <iostream> using namespace std; int main() {int a,b,c,d,e,f;while (true){int N 0; // 计算需要的包裹数cin>>a>>b>>c>>d>>e>>f;if (a0&&b0&&c0&&d0&…

HBase压测 ycsb

## ycsb 导入数据 rootXX.14.40.1971、对portrait压测 ansible hadoop -i hosts_hbase_portrait_20230730.txt -m shell -a "hostname && chdir/data/workspace/ycsb-0.17.0 nohup bin/ycsb load hbase20 -P workloads/workload_insert -cp /usr/local/fqlhadoop/…