当前位置: 首页 > 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.总…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...

TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?

在工业自动化持续演进的今天&#xff0c;通信网络的角色正变得愈发关键。 2025年6月6日&#xff0c;为期三天的华南国际工业博览会在深圳国际会展中心&#xff08;宝安&#xff09;圆满落幕。作为国内工业通信领域的技术型企业&#xff0c;光路科技&#xff08;Fiberroad&…...

C++实现分布式网络通信框架RPC(2)——rpc发布端

有了上篇文章的项目的基本知识的了解&#xff0c;现在我们就开始构建项目。 目录 一、构建工程目录 二、本地服务发布成RPC服务 2.1理解RPC发布 2.2实现 三、Mprpc框架的基础类设计 3.1框架的初始化类 MprpcApplication 代码实现 3.2读取配置文件类 MprpcConfig 代码实现…...