当前位置: 首页 > news >正文

什么是 Vue 的自定义事件?如何触发和监听?

Vue 的自定义事件详解

什么是自定义事件?

在 Vue 中,自定义事件是组件之间通信的重要机制。自定义事件允许子组件向父组件发送消息,通常用于处理用户交互或异步操作的结果。这种机制使得组件间的通信更加灵活和解耦。

自定义事件的基本概念

  • 事件触发:子组件可以通过 $emit 方法触发自定义事件。
  • 事件监听:父组件可以通过 v-on 指令或 @ 符号来监听子组件发出的自定义事件。

如何触发自定义事件?

1. 在子组件中使用 $emit

在 Vue 组件中,使用 $emit 方法可以触发自定义事件。该方法接收两个参数:

  • 事件名称:字符串,定义事件的名称。
  • 事件数据(可选):任何类型的数据,可以传递给监听事件的父组件。
示例代码:
<template><button @click="handleClick">点击我</button>
</template><script>
export default {methods: {handleClick() {// 触发 'myEvent' 事件,并传递数据this.$emit('myEvent', { message: 'Hello from child!' });}}
}
</script>

在上面的示例中,子组件定义了一个按钮,当按钮被点击时,handleClick 方法被调用,触发名为 myEvent 的自定义事件,并传递一个包含消息的对象。

2. 在父组件中监听自定义事件

父组件可以通过 v-on 指令或 @ 符号来监听子组件发出的自定义事件。监听时,可以定义一个方法来处理事件。

示例代码:
<template><div><ChildComponent @myEvent="handleMyEvent" /></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},methods: {handleMyEvent(data) {console.log(data.message); // 输出: Hello from child!}}
}
</script>

在这个示例中,父组件通过 @myEvent 监听子组件 ChildComponent 发出的 myEvent 事件,并定义了 handleMyEvent 方法来处理事件。

事件传播和修饰符

在 Vue 中,自定义事件的传播是单向的,父组件可以监听子组件的事件,但子组件无法直接调用父组件的方法。为了处理某些特定的场景,Vue 提供了一些事件修饰符。

1. .stop 修饰符

使用 .stop 修饰符可以阻止事件的冒泡。比如在一个嵌套的组件中,某个事件可能会被父组件也监听到,这时可以使用 .stop 来阻止这种情况。

示例代码:
<template><div @click="handleParentClick"><ChildComponent @myEvent.stop="handleChildEvent" /></div>
</template><script>
export default {methods: {handleParentClick() {console.log('父组件被点击');},handleChildEvent() {console.log('子组件事件被触发');}}
}
</script>

在这个示例中,当子组件的 myEvent 被触发时,父组件的 handleParentClick 方法不会被调用。

2. .prevent 修饰符

使用 .prevent 修饰符可以阻止默认事件的行为,例如在表单提交时阻止页面刷新。

示例代码:
<template><form @submit.prevent="handleSubmit"><button type="submit">提交</button></form>
</template><script>
export default {methods: {handleSubmit() {console.log('表单已提交');}}
}
</script>

在这个示例中,.prevent 修饰符阻止了表单的默认提交行为。

自定义事件的最佳实践

1. 事件命名

在命名自定义事件时,最好遵循一定的命名规范,以提高可读性和可维护性。通常使用 kebab-case(短横线分隔)来命名事件,例如 user-logged-in

2. 传递必要数据

在触发自定义事件时,只传递必要的数据,以避免不必要的复杂性。确保父组件接收到的数据是有意义的。

3. 组件解耦

使用自定义事件可以有效解耦组件之间的关系,子组件不需要知道父组件的实现细节,只需要发送事件并传递数据。

4. 文档化事件

在组件的文档中明确列出自定义事件及其参数,以便其他开发者理解和使用组件。

例子:完整示例

下面是一个完整的示例,展示了如何在 Vue 中使用自定义事件。

子组件 ChildComponent.vue

<template><div><button @click="sendMessage">发送消息</button></div>
</template><script>
export default {methods: {sendMessage() {this.$emit('messageSent', { text: 'Hello from Child!' });}}
}
</script>

父组件 ParentComponent.vue

<template><div><ChildComponent @messageSent="handleMessage" /><p>接收到的消息:{{ receivedMessage }}</p></div>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},data() {return {receivedMessage: ''};},methods: {handleMessage(data) {this.receivedMessage = data.text;}}
}
</script>

运行过程

  1. 用户点击子组件中的按钮。
  2. 子组件触发 messageSent 自定义事件,并传递消息对象。
  3. 父组件监听到该事件,调用 handleMessage 方法并更新接收到的消息。

相关文章:

什么是 Vue 的自定义事件?如何触发和监听?

Vue 的自定义事件详解 什么是自定义事件&#xff1f; 在 Vue 中&#xff0c;自定义事件是组件之间通信的重要机制。自定义事件允许子组件向父组件发送消息&#xff0c;通常用于处理用户交互或异步操作的结果。这种机制使得组件间的通信更加灵活和解耦。 自定义事件的基本概念…...

windows上vscode cmake工程搭建

安装vscode插件&#xff1a; 1.按装fastc&#xff08;主要是安装MinGW\mingw64比较方便&#xff09; 2.安装C&#xff0c;cmake&#xff0c;cmake tools插件 3.准备工作完成之后&#xff0c;按F1&#xff0c;选择cmake:Quick Start就可以创建一个cmake工程。 4.设置Cmake: G…...

DEMF模型赋能多模态图像融合,助力肺癌高效分类

目录 论文创新点 实验设计 1. 可视化的研究设计 2. 样本选取和数据处理 3. 集成分类模型 4. 实验结果 5. 可视化结果 图表总结 可视化知识图谱 在肺癌早期筛查中,计算机断层扫描(CT)和正电子发射断层扫描(PET)作为两种关键的影像学手段,分别提供了丰富的解剖结构…...

Android:权限permission申请示例代码

Android应用项目每次最开始都要进行权限申请&#xff0c;贴一下权限申请的示例代码&#xff0c;方便后续Ctrl CV使用 1.AndroidManifest.xml 配置要申请的权限 <uses-permission android:name"android.permission.READ_CONTACTS" /> <uses-permission and…...

AI Agent Service Toolkit:一站式大模型智能体开发套件

项目简介 该工具包基于LangGraph、FastAPI和Streamlit构建,提供了构建和运行大模型Agent的最小原子能力,包含LangGraph代理、FastAPI服务、用于与服务交互的客户端以及一个使用客户端提供聊天界面的Streamlit应用。用户可以利用该工具包提供的模板快速搭建基于LangGraph框架…...

大数据SQL调优专题——Hive执行原理

引入 Apache Hive 是基于Hadoop的数据仓库工具&#xff0c;它可以使用SQL来读取、写入和管理存在分布式文件系统中的海量数据。在Hive中&#xff0c;HQL默认转换成MapReduce程序运行到Yarn集群中&#xff0c;大大降低了非Java开发者数据分析的门槛&#xff0c;并且Hive提供命令…...

Python程序打包 |《Python基础教程》第18章笔记

《Python基础教程》第1章笔记&#x1f449;https://blog.csdn.net/holeer/article/details/143052930 第18章 程序打包 程序可以发布后&#xff0c;你可能想先将它打包。如果程序只包含一个.py文件&#xff0c;这可能不是问题。然而&#xff0c;如果用户不是程序员&#xff0…...

图论 之 迪斯科特拉算法求解最短路径

文章目录 题目743.网络延迟时间3341.到达最后一个房间的最少时间I 求解最短路径的问题&#xff0c;分为使用BFS和使用迪斯科特拉算法&#xff0c;这两种算法求解的范围是有区别的 BFS适合求解&#xff0c;边的权值都是1的图中的最短路径的问题 图论 之 BFS迪斯科特拉算法适合求…...

掌握Spring开发_常用注解详解

1. 前言 1.1 写作目的 本文旨在全面解析Spring框架中常用的注解,帮助开发者更好地理解和使用这些注解,提高开发效率和代码质量。Spring框架提供了丰富的注解,简化了依赖注入、AOP、事务管理、Web开发等多个方面的开发工作。通过本文的学习,读者可以掌握这些注解的使用方法…...

华为昇腾服务器(固件版本查询、驱动版本查询、CANN版本查询)

文章目录 1. **查看固件和驱动版本**2. **查看CANN版本**3. **其他辅助方法**注意事项 在华为昇腾服务器上查看固件、驱动和CANN版本的常用方法如下&#xff1a; 1. 查看固件和驱动版本 通过命令行工具 npu-smi 执行以下命令查看当前设备的固件&#xff08;Firmware&#xff0…...

Kubernetes的Ingress和Service有什么区别?

在Kubernetes中&#xff0c;Ingress和Service是两个不同的概念&#xff0c;它们在功能、作用范围、应用场景等方面存在明显区别&#xff0c;具体如下&#xff1a; 功能 Ingress&#xff1a;主要用于管理集群外部到内部服务的HTTP和HTTPS流量路由。它可以根据域名、路径等规则…...

洛谷B3619(B3620)

B3619 10 进制转 x 进制 - 洛谷 B3620 x 进制转 10 进制 - 洛谷 代码区&#xff1a; #include<algorithm> #include<iostream> #include<vector> using namespace std;int main(){int n,x;cin >> n >> x;vector<char> arry;while(n){if(…...

vue组件,父子通信,路由,异步请求后台接口,跨域

1.组件注册 1.1局部注册 局部注册组件---1.导入import 组件对象名 from 组件网页路径 export default{ name:"名称", data(){return {}}, created(){}, …...

详解分布式ID实践

引言 分布式ID&#xff0c;所谓的分布式ID&#xff0c;就是针对整个系统而言&#xff0c;任何时刻获取一个ID&#xff0c;无论系统处于何种情况&#xff0c;该值不会与之前产生的值重复&#xff0c;之后获取分布式ID时&#xff0c;也不会再获取到与其相同的值&#xff0c;它是…...

.NET + Vue3 的前后端项目在IIS的发布

目录 一、发布准备 1、安装 IIS 2、安装 Windows Hosting Bundle&#xff08;.NET Core 托管捆绑包&#xff09; 3、安装 IIS URL Rewrite 二、项目发布 1、后端项目发布 2、前端项目发布 3、将项目部署到 IIS中 三、网站配置 1、IP配置 2、防火墙配置 3、跨域配置…...

软件测试之压力测试

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 压力测试 压力测试是一种软件测试&#xff0c;用于验证软件应用程序的稳定性和可靠性。压力测试的目标是在极其沉重的负载条件下测量软件的健壮性和错误处理能力&…...

矩阵-矩阵置零

矩阵置零 给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为0 。请使用 原地 算法。在计算机科学中&#xff0c;一个原地算法&#xff08;in-place algorithm&#xff09;是一种使用小的&#xff0c;固定数量的额外之空间来转…...

【JavaScript】《JavaScript高级程序设计 (第4版) 》笔记-Chapter19-表单脚本

十九、表单脚本 表单脚本 JavaScript 较早的一个用途是承担一部分服务器端表单处理的责任。虽然 Web 和 JavaScript 都已经发展了很多年&#xff0c;但 Web 表单的变化不是很大。由于不能直接使用表单解决问题&#xff0c;因此开发者不得不使用JavaScript 既做表单验证&#xf…...

【C# 数据结构】队列 FIFO

目录 队列的概念FIFO (First-In, First-Out)Queue<T> 的工作原理&#xff1a;示例&#xff1a;解释&#xff1a; 小结&#xff1a; 环形队列1. **FIFO&#xff1f;**2. **环形缓冲队列如何实现FIFO&#xff1f;**关键概念&#xff1a; 3. **环形缓冲队列的工作过程**假设…...

论文笔记-WWWCompanion2024-LLM as Data Augmenters for Cold-Start Item Recommendation

论文笔记-WWW Companion 2024-Large Language Models as Data Augmenters for Cold-Start Item Recommendation 大语言模型作为冷启动项目推荐的数据增强器摘要1.引言2.前言3.LLMs作为数据增强3.1增强数据生成3.2成对比较损失 4.实验4.1实验设置4.2结果和分析4.3超参数实验 5.总…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...