繁体企业网站源码,双鱼儿 网站建设,重庆做网络推广的公司,灰色网站网站Vue 3 中的原生事件监听与组件事件处理完全指南
在 Vue 3 中#xff0c;事件监听和事件处理是组件交互中的关键部分。Vue 提供了一套简单而强大的事件处理机制#xff0c;可以方便地监听 DOM 原生事件和组件自定义事件。本篇文章将详细介绍 Vue 3 中事件的使用#xff0c;包…Vue 3 中的原生事件监听与组件事件处理完全指南
在 Vue 3 中事件监听和事件处理是组件交互中的关键部分。Vue 提供了一套简单而强大的事件处理机制可以方便地监听 DOM 原生事件和组件自定义事件。本篇文章将详细介绍 Vue 3 中事件的使用包括如何监听原生事件、绑定事件处理函数、使用事件修饰符、在子组件中触发事件以及 script setup 语法糖的应用。 一、原生事件监听
在 Vue 3 中我们可以使用 v-on 指令来监听原生 DOM 事件。v-on 指令也可以缩写为 使得代码更加简洁。
1. 基本用法
绑定事件时可以直接将事件名称传入 v-on 指令并在后面跟随事件处理函数。例如监听 click 事件
templatebutton clickhandleClick点击我/button
/templatescript setup
import { ref } from vue;const count ref(0);function handleClick() {count.value;console.log(按钮点击次数:, count.value);
}
/script解释
clickhandleClick 表示绑定 click 事件事件触发时会调用 handleClick 函数。在 handleClick 函数中我们通过 count.value 来增加点击计数。
2. 传递事件参数
有时我们需要传递参数给事件处理函数。可以直接在事件处理函数调用时传入参数。
templatebutton clickhandleClick(hello)点击我/button
/templatescript setup
function handleClick(message) {console.log(传递的参数:, message);
}
/script解释
clickhandleClick(hello) 表示点击按钮时调用 handleClick并将 hello 作为参数传入。
3. 访问事件对象
如果需要访问事件对象可以通过 $event 关键字获取。
templatebutton clickhandleClick($event)点击获取事件对象/button
/templatescript setup
function handleClick(event) {console.log(事件对象:, event);
}
/script解释
clickhandleClick($event) 中的 $event 代表原生事件对象。 二、事件修饰符
Vue 提供了多个事件修饰符使事件处理更加灵活和方便。常用的修饰符包括 .stop、.prevent、.capture、.self、.once 和 .passive。
1. .stop阻止事件冒泡
使用 .stop 可以阻止事件冒泡到父级元素。
templatediv clickouterClickbutton click.stopinnerClick阻止冒泡/button/div
/templatescript setup
function outerClick() {console.log(外层元素被点击);
}function innerClick() {console.log(内层按钮被点击);
}
/script解释
点击按钮时innerClick 会触发且不会冒泡到外层的 div 上。
2. .prevent阻止默认行为
使用 .prevent 可以阻止元素的默认行为例如阻止表单提交或链接跳转。
templateform submit.preventhandleSubmitbutton typesubmit提交/button/form
/templatescript setup
function handleSubmit() {console.log(表单提交被阻止);
}
/script解释
使用 .prevent 修饰符阻止表单的默认提交行为。
3. .once事件只触发一次
使用 .once 修饰符事件只会触发一次之后自动解绑。
templatebutton click.oncehandleClick点击一次/button
/templatescript setup
function handleClick() {console.log(按钮只会被点击一次);
}
/script解释
第一次点击按钮时handleClick 会被调用之后的点击将不再触发该事件。
4. 其他修饰符
.self仅在事件从自身触发时才执行。.capture使用事件捕获模式。.passive为事件添加 passive 修饰符一般用于滚动事件监听。 三、子组件事件传递
在组件化开发中我们通常会在子组件中触发事件然后通过 emit 将事件传递给父组件处理。Vue 3 中的 emit 使用更为简洁同时可以与 script setup 结合提升开发体验。
1. 子组件触发事件
在子组件中使用 emit 触发自定义事件首先要引入 defineEmits。
ChildComponent.vue
templatebutton clicksendEvent发送事件/button
/templatescript 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
templateChildComponent customEventhandleCustomEvent /
/templatescript setup
import ChildComponent from ./ChildComponent.vue;function handleCustomEvent(message) {console.log(接收到的消息:, message);
}
/script解释
customEventhandleCustomEvent 监听子组件触发的 customEvent 事件并调用 handleCustomEvent 处理该事件。 四、传递事件给子组件
有时我们希望在父组件中监听子组件的原生事件如 click可以使用 .native 修饰符。
不过在 Vue 3 中官方已经不再推荐使用 .native。取而代之的是直接在组件中监听事件这会自动处理绑定到最外层元素的原生事件。
示例直接监听子组件的原生点击事件
ChildComponent.vue
templatebutton子组件按钮/button
/templatescript setup
/scriptParentComponent.vue
template!-- 直接监听子组件的 click 事件 --ChildComponent clickhandleChildClick /
/templatescript setup
import ChildComponent from ./ChildComponent.vue;function handleChildClick() {console.log(子组件按钮被点击);
}
/script解释
父组件通过 clickhandleChildClick 监听子组件的 click 事件无需额外的 .native 修饰符。 五、给所有事件动态绑定处理函数
在某些场景中我们需要给组件的所有事件动态地绑定处理函数。可以通过 v-onobject 的语法将一个包含事件处理函数的对象绑定到组件上。
templateChildComponent v-onlisteners /
/templatescript setup
import { reactive } from vue;
import ChildComponent from ./ChildComponent.vue;const listeners reactive({click: () console.log(子组件被点击),mouseover: () console.log(鼠标移入子组件)
});
/script解释
v-onlisteners 会将 listeners 对象中的所有事件绑定到 ChildComponent 上。 六、总结
本文详细介绍了 Vue 3 中的事件监听与处理包括原生事件监听、事件修饰符、子组件事件传递与监听以及动态绑定事件的用法。掌握这些事件处理技巧可以更灵活地实现组件间的交互提高代码的可读性和复用性。在 Vue 3 中配合 script setup 语法糖可以让代码更加简洁易读使开发体验更流畅。
