【愚公系列】《循序渐进Vue.js 3.x前端开发实践》017-事件的监听与处理

原创

愚公搬代码

发布于 2025-07-03 01:56:46

1890

文章被收录于专栏：循序渐进Vue.js 3.x前端开发实践循序渐进Vue.js 3.x前端开发实践

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在现代前端开发中，事件处理是用户交互体验的重要组成部分。随着 Vue 3 的推出，许多开发者开始探索其全新的特性和更高效的事件处理机制。本篇文章将深入探讨 Vue 3 中事件的监听与处理，帮助你更好地理解如何在组件中响应用户的操作。

Vue 3 通过组合式 API 和更灵活的事件处理机制，使得事件监听变得更加简单和可维护。在这篇文章中，我们将介绍 Vue 3 中的事件绑定、事件修饰符、事件处理函数的使用，以及如何通过组合式 API 来管理复杂的事件逻辑。

🚀一、事件的监听与处理

🔎1.HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="Application">
        <div>点击次数:{{count}}</div>
        <button @click="click(2), log($event)">点击</button>
        <div @click.capture.stop="click1" style="border:solid red">
            外层
            <div @click.capture.stop="click2" style="border:solid red">
                中层
                <div @click.capture.stop="click3" style="border:solid red">
                    点击
                </div>
            </div>
        </div>
    </div>
    <script>
        const { createApp, ref } = Vue
        const config = {
            setup() {
                const count = ref(0)
                const click = (step) => {
                    count.value += step
                }
                const log = (event) => {
                    console.log(event)
                }
                const click1 = () => {
                    console.log("外层")
                }
                const click2 = () => {
                    console.log("中层")
                }
                const click3 = () => {
                    console.log("内层")
                }
                return { count, click, click1, click2, click3, log }
            }
        }
        createApp(config).mount("#Application")
    </script>
</body>
</html>

🔎2.代码结构与功能解析

🦋2.1 HTML 结构

<!DOCTYPE html>：声明文档类型为 HTML5。
<html lang="en">：定义页面的语言为英语。
<meta charset="UTF-8">：定义文档字符集为 UTF-8。
<meta http-equiv="X-UA-Compatible" content="IE=edge">：保证 IE 浏览器以最新标准渲染页面。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：确保网页在移动设备上显示良好。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>：引入 Vue 3 的 CDN 版本。

🦋2.2 Vue 组件

在 <body> 标签内的内容被 Vue 应用控制，最外层 <div id="Application"> 是 Vue 挂载的目标元素。

<div>点击次数:{{count}}</div>：展示一个响应式数据 count，并且随着 count 的变化自动更新显示。
<button @click="click(2), log($event)">点击</button>：
- @click 是 Vue 的事件绑定语法，相当于 v-on:click。点击按钮时会触发 click(2) 和 log($event)。
- click(2) 调用 click 方法并传入 2，增加 count 的值。
- log($event) 会输出触发点击事件的原始事件对象（$event）。
事件传播与捕获：
- @click.capture.stop="click1"：Vue 的事件修饰符 capture 会将事件绑定到事件捕获阶段，而不是冒泡阶段。stop 会阻止事件继续传播。
- 这是嵌套的结构，包含三个 <div>，每个 <div> 都会捕获点击事件并触发不同的函数：
  - 外层 <div> 调用 click1。
  - 中层 <div> 调用 click2。
  - 内层 <div> 调用 click3。
- 但三个 <div>是嵌套的所以只会处罚最外层 <div>的事件。🦋2.3 Vue 逻辑

Vue 3 中使用了 Composition API 来编写组件逻辑。

const { createApp, ref } = Vue

createApp 是 Vue 3 创建应用实例的方法。
ref 用来定义响应式数据。

const config = {
    setup() {
        const count = ref(0) // 响应式变量，初始值为 0
        const click = (step) => {
            count.value += step // 修改 count 值
        }
        const log = (event) => {
            console.log(event) // 打印原始事件对象
        }
        const click1 = () => {
            console.log("外层") // 输出 "外层"
        }
        const click2 = () => {
            console.log("中层") // 输出 "中层"
        }
        const click3 = () => {
            console.log("内层") // 输出 "内层"
        }
        return { count, click, click1, click2, click3, log }
    }
}

count 是一个响应式变量，初始值为 0，当其值发生变化时，页面上的 {{count}} 会自动更新。
click(step) 方法用来改变 count 的值，每次点击按钮时，count 会增加 step 的值。
log(event) 方法用来打印事件对象，这会在点击按钮时显示。
click1, click2, click3 是分别绑定到外层、中层、内层 <div> 的点击事件的处理函数。

createApp(config).mount("#Application")

createApp(config) 创建了一个 Vue 应用，并通过 mount("#Application") 将其挂载到页面上 id 为 Application 的元素上。

🦋2.4 事件传播控制

@click.capture.stop="click1"，@click.capture.stop="click2" 和 @click.capture.stop="click3"：这些事件绑定使用了 capture 和 stop 修饰符：
- capture：事件会在捕获阶段被处理，而不是在冒泡阶段。这意味着事件从外层元素开始捕获，直到内层元素。
- stop：阻止事件进一步传播，防止事件继续冒泡到父元素。

这样，即使点击了内层的 <div>，只会触发 click3，且不会触发其他层级的 click1 和 click2，因为事件已经被 stop 阻止。

🔎3.事件处理逻辑

点击按钮：点击按钮时会触发 click(2) 和 log($event)。
- click(2) 会将 count 增加 2。
- log($event) 会打印触发按钮点击的事件对象。
点击嵌套的 <div>：
- 当点击某个层级时，事件会按照捕获顺序从外到内传播。由于使用了 @click.capture.stop 修饰符，每一层的事件都会在捕获阶段处理，并且使用 stop 阻止了事件继续传播到其他层级。
- 因此，只有最外层的 <div> 会触发 click1。

🔎4.总结

这段代码展示了如何使用 Vue 3 处理事件绑定、事件传播控制以及响应式数据更新：

@click 绑定点击事件。
通过 capture 和 stop 修饰符控制事件捕获与阻止传播。
使用 Vue 3 的 Composition API 定义响应式数据和事件处理函数。

这样通过 Vue 框架的声明式绑定和事件控制，能够更简洁、清晰地管理交互和逻辑。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S14#新手村

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S14#新手村

登录后参与评论

0 条评论

热度