Vue学习之路17----事件

可以自定义事件让子组件向父组件传值

1.使用emit

请添加图片描述

请添加图片描述

2.使用props

请添加图片描述

请添加图片描述

3.使用mitt

其实mitt和第一种方法类似,都用emitt事件,但是mitt不局限于父子之间通信,他可以在任意2个组件之间通信,

虽然需要安装,但mitt很小,几乎不影响组件正常运行速度

安装mitt

npm i mitt

然后在src目录下新建utils文件夹(utils用来存放工具),在新建一个emitter.js文件,如图emitter.js写入以下代码

请添加图片描述

以上代码通过mitt()创建实例,.on用来绑定事件,.emit用来触发事件,.off用来解绑事件,也可以用.all.clear解绑全部事件

然后在main.js中引入就可以使用了

import emitter from "@/utils/emitter";

运行效果如下:

请添加图片描述

接下来是组件通信的写法,假设父组件里有v1,v2两个组件

请添加图片描述

如上可实现组件通信,建议在组件销毁时解绑

请添加图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

基于梯度的快速准确头部运动补偿方法在锥束CT中的应用|文献速递-基于深度学习的病灶分割与数据超分辨率

Title 题目 A gradient-based approach to fast and accurate head motion compensation in cone-beam CT 基于梯度的快速准确头部运动补偿方法在锥束CT中的应用 01 文献速递介绍 锥束计算机断层扫描(CBCT)系统在灵活性方面比螺旋多排探测器计算机断…

基于 JavaWeb 的宠物商城系统(附源码,文档)

博主介绍:✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇…

Redis学习:BitMap/HyperLogLog/GEO案例 、布隆过滤器BloomFilter、缓存预热+缓存雪崩+缓存击穿+缓存穿透

Redis学习 文章目录 Redis学习1、BitMap/HyperLogLog/GEO案例2. 布隆过滤器BloomFilter3. 缓存预热缓存雪崩缓存击穿缓存穿透 1、BitMap/HyperLogLog/GEO案例 真实需求面试题 亿级数据的收集清洗统计展现对集合中数据进行统计,基数统计,二值统计&#xf…

【论文速读】| PathSeeker:使用基于强化学习的越狱攻击方法探索大语言模型的安全漏洞

基本信息 原文标题: PathSeeker: Exploring LLM Security Vulnerabilities with a Reinforcement Learning-Based Jailbreak Approach 原文作者: Zhihao Lin, Wei Ma, Mingyi Zhou, Yanjie Zhao, Haoyu Wang, Yang Liu, Jun Wang, Li Li 作者单位: Beihang University, Nany…

P2672 [NOIP2015 普及组] 推销员

P2672 [NOIP2015 普及组] 推销员 难度: 提高/省选- 。 考点:贪心、前缀和。 题意: ​ n n n 个住户,小明每走一米消耗 1 1 1 疲劳,第 i i i 个住户距离起点 S i S_i Si​ 米,同时走进住户沟通会累积…

软件工程技术专业在物联网应用开发中的关键技术与挑战

引言 物联网技术的蓬勃发展与广泛普及,极大地丰富了人们的日常生活,催生了诸如智能家居、智能交通、智能健康等一系列创新应用,为用户提供了更加智能化、个性化的服务体验。然而,物联网应用开发也随之迎来了诸多挑战,…

基于Multisim光控夜灯LED电路带计时功能(含仿真和报告)

【全套资料.zip】光控夜灯LED电路设计Multisim仿真设计数字电子技术 文章目录 功能一、Multisim仿真源文件二、原理文档报告资料下载【Multisim仿真报告讲解视频.zip】 功能 光控夜灯LED电路 1.采用纯数字电路,非单片机。 2.通过检测周围光线,光线暗自…

vue 3:监听器

目录 1. 基本概念 2. 侦听数据源类型 1. 监听getter函数 2. 监听 ref 或 reactive 的引用 3. 多个来源组成的数组 4. 避免直接传递值!!! 3. 深层侦听器 4. 立即回调的侦听器 5. 一次性侦听器 6. watchEffect() 7. 暂停、恢复和停止…

c 语言链表的简单使用

一、链表介绍 在 C 语言中,链表是一种常用的数据结构,用于动态地存储数据。链表中的每个元素称为节点,每个节点包含数据部分和指向下一个节点的指针。 1.1 链表的基本概念 定义:链表是一种物理存储单元上非连续、非顺序的存储结…

计算机网络——路由器构成

算路由表是分布式去算——你算你的,我算我的 输出队列非先来先传 调度发生在哪里 缓存队列一般是应对——来数据方向的速度过快问题

微信小程序uniapp基于Android的流浪动物管理系统 70c3u

文章目录 项目介绍具体实现截图技术介绍mvc设计模式小程序框架以及目录结构介绍错误处理和异常处理java类核心代码部分展示详细视频演示源码获取 项目介绍 以往流浪猫狗的救助网站相关信息的管理,都是工作人员手工统计。这种方式不但时效性低,而且需要查…

【Pikachu靶场:XSS系列】xss之过滤,xss之htmlspecialchars,xss之herf输出,xss之js输出通关啦

一、xss之过滤 <svg onloadalert("过关啦")> 二、xss之htmlspecialchars javascript:alert(123) 原理&#xff1a;输入测试文本为herf的属性值和内容值&#xff0c;所以转换思路直接变为js代码OK了 三、xss之href输出 JavaScript:alert(假客套) 原理&#x…

【$15000】 通过监控调试模式实现RCE

你有没有遇到过一个你直觉上知道存在漏洞的端点&#xff0c;但你却无法完全理解后端发生了什么或如何利用它&#xff1f;在这篇文章中&#xff0c;我将引导你了解一种技术&#xff0c;它将我的黑盒测试转变为半白盒测试。这种方法导致了多个漏洞的发现&#xff0c;并最终实现了…

npm镜像的常用操作

查看当前配置的 npm 镜像 npm config get registry切换官方镜像 npm config set registry https://registry.npmjs.org/切换淘宝镜像(推荐) npm config set registry https://registry.npmmirror.com/切换腾讯云镜像 npm config set registry http://mirrors.cloud.tencent…

Fake Location解除屏蔽分析

前言:对于Fake Location的appconfigs.xml文件屏蔽分析 <?xml version1.0 encodingutf-8 standaloneyes ?> <map><string name"config">{&quot;disabledApps&quot;:[&quot;com.srit.swork.views&quot;,&quot;com.sqjz&q…

3D系统开发工具HOOPS SDK如何实现PLM应用的创新与优化?

无论是支持汽车、航空航天、医疗设备还是建筑&#xff0c;产品生命周期管理(PLM)解决方案实际上都是将制造生产系统结合在一起的粘合剂&#xff0c;从头到尾提供数字线程并为最终用户优化流程。 Tech Soft 3D在行业内近30年&#xff0c;我们对领先的应用程序所基于的组件技术&…

数据结构和算法之树形结构B+树(7)

前一章节我们介绍了B树&#xff0c;了解了B树是适用于大规模数据存储和磁盘访问‌的树结构&#xff0c;而今天要讲的B是B树的一种改进&#xff0c;是B树的一种优化和改进&#xff0c;被大多数据库系统采纳作为索引结构使用。 一、基本概念 B树是B树的改进&#xff0c;因…

用 Python 爬取淘宝商品价格信息时需要注意什么?

用 Python 爬取淘宝商品价格信息时&#xff0c;需要注意以下方面&#xff1a; 一、法律和道德规范&#xff1a; 遵守法律法规&#xff1a;网络爬虫的行为应在法律允许的范围内进行。未经淘宝平台授权&#xff0c;大规模地爬取其商品价格信息并用于商业盈利等不当用途是违法的…

基于Python的自然语言处理系列(50):Soft Prompt 实现

在本篇文章中,我们将实现一个简单的 Soft Prompt 技术,该技术允许我们仅微调新增的嵌入权重,而保持预训练模型不变。Soft Prompt 的主要优势在于它的参数高效性,使得模型在特定任务上快速适应,而无需重新训练模型的所有权重。 1. Soft Prompt 概述 Soft Prompt 技术来源于…