Vue中 this.$emit() 方法详解, 帮助子组件向父组件传递事件

news/2025/4/2 14:25:00/文章来源:https://www.cnblogs.com/emanlee/p/18283899

 this.$emit()是 Vue.js 中一个很有用的方法,可以帮助子组件向父组件传递事件

 

前言

在Vue中,this.$emit()方法用于触发自定义事件。它是Vue实例的一个方法,可以在组件内部使用。

使用 this.$emit() 方法,可以向父组件发送自定义事件,并传递数据给父组件。父组件可以通过监听这个自定义事件来执行相应的逻辑

下面是一个简单的示例,展示了如何在Vue组件中使用this.$emit()方法:

项目文件夹下该组件定义路径 E:\myproject\src\components\ChildComponent\index.vue

子组件 index.vue

 

在上面的示例中,当按钮被点击时,handleButtonClick方法会被调用。在该方法中,我们使用this.$emit()方法触发了一个名为custom-event的自定义事件,并传递了字符串’Hello, World!'作为数据。

父组件可以通过监听custom-event来接收这个自定义事件,并执行相应的逻辑。例如,在父组件中可以这样监听并处理这个事件:

父组件 table.vue

 

父组件通过@custom-event监听了custom-event自定义事件,并在handleCustomEvent方法中处理了这个事件。当子组件中的this.$emit(‘custom-event’, ‘Hello, World!’)被触发时,父组件的handleCustomEvent方法会被调用,并且传递的数据’Hello, World!'会被打印出来。

注: 

 

通过在components选项中注册子组件,可以在父组件的模板中使用该子组件。在这个例子中,父组件可以通过以下方式在模板中使用ChildComponent:

 

子组件在模板中使用时需要使用短横线命名法(kebab-case),而在组件定义中使用驼峰命名法(camelCase)。你可以在components选项中注册多个子组件,并在父组件的模板中使用它们。这样可以实现更好的代码组织和复用。

这就是使用this.$emit()方法在Vue中触发自定义事件的基本用法。

 

REF

转自

https://www.jb51.net/javascript/299486bxp.htm

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/908053.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity 运用新输入方法进行移动 (input System)

首先在包管理器中添加 input System重启后进入编辑项目中 找到玩家-配置 将Api兼容级别 改成 .NET Framework 活动输出处理改成 输入系统包(新)创建瓦片地图矩形 添加调色板 为瓦片地图添加Tilemap Collider 2D组件以及Composite Collider 2D(会自动添加Rigidbody 2d组件)组…

C#之Bitmap

SetPixel和GetPixel private void btnC_Click(object sender, RoutedEventArgs e) {OpenFileDialog dia = new OpenFileDialog();dia.Filter = "图像文件|*.png;*.bmp;*.jpg|所有文件|*.*";dia.Multiselect = false;if (dia.ShowDialog() == true){var fileName=dia.…

DVWA靶场 - Command Injection

Low 代码审计: 从源码中可以看出,代码只是执行了一个ping 命令,并没有对后面的参数做限制因此我们可以分别使用 ;、 |、||、&、&&进行注入;,命令行可以使用whoami、ipconfig/ifconfig、ls/dir 等Medium 代码审计: 对比代码发现,;和&& 被加入了黑名…

Linux基本使用-2

用户权限操作 1.su和exit命令 su [-] [用户名] 和 exit ==> 切换用户,不写默认为root;可用exit或者快捷键(ctrl+d)退至上一个用户 -表示切换用户后加载环境变量,建议带上 2.sudo和visudo命令 sudo 其他命令 ==> 为该命令临时授root权限,需为该用户==配置sudo认证 v…

leetcode每日一题:向字符串添加空格

题目 2109. 向字符串添加空格 给你一个下标从 0 开始的字符串 s ,以及一个下标从 0 开始的整数数组 spaces 。 数组 spaces 描述原字符串中需要添加空格的下标。每个空格都应该插入到给定索引处的字符值 之前 。例如,s = "EnjoyYourCoffee" 且 spaces = [5, 9] ,那…

jmeter 压测过程

测试策略 1、基准测试,获取无压力情况下,系统的平均响应时间; 2、采用持续并发的策略,获取系统的在不同压力下平均响应时间,TPS ; 3、在现有硬件资源下,获取到最高TPS; 4、在现有硬件资源下,持续较高TPS运行,验证系统的稳定性; 5、资源增加时,最大TPS是否可以线性增…

BaseMultiTableInnerInterceptor源码解读

本文首发在我的博客:https://blog.liuzijian.com/post/mybatis-plus-source-multi-table-inner-interceptor.html 一、概述 BaseMultiTableInnerInterceptor是MyBatis-Plus中的一个抽象类,位于mybatis-plus-jsqlparser-4.9模块中com.baomidou.mybatisplus.extension.plugins.…

test_your_nc 1(含前提简要)

前提简要: 虚拟机版本:Ubuntu24.04 pwn环境搭配如下(后面若有其他这个链接没有配置上的工具,都会在相应题目部分给出更新/分享/提示) Pwn环境搭建 都是基于个人理解,不一定完全正确!!! 题目:先启动靶机 方法一: 常规测试 直接在虚拟机nc与靶机进行连接 这道题连接后可能…

双向可控硅的基本原理阐述

双向可控硅的基本原理阐述正向--第1象限 (1)当T2、T1极间加正方向电压(即UT2〉UT1)时,如下图1-13(a)所显示。在这样的情况下,若G极无电压,则T2、T1极间不导通;若在G、T1极间加正方向电压(即UG〉UT1),T2、T1极间马上导通,电流由T2极流入,从T1极流出,这时移去G极…

DAPO: 面向开源大语言模型的解耦裁剪与动态采样策略优化系统

在人工智能技术快速迭代发展的背景下,大语言模型(LLMs)已成为自然语言处理与生成领域的核心技术。然而,将这些模型与人类偏好精确对齐并增强其复杂推理能力的挑战,促使研究者开发了一系列复杂的强化学习(RL)技术。DAPO(解耦裁剪和动态采样策略优化,Decoupled Clip and…

mysql咋了?不慌,连接不上而已。

【问题】 【自言自语】没乱整啥呀,怎么突然连不上了?先上网看看,看了几篇,好麻烦,感觉不太符合我这个问题症状。先按自己的感觉试试吧。 【解决】 Win+r后在“运行”窗口输入“services.msc”,找到mysql,重启或启动它。