vue3使用mitt用于组件之间传值

vue3已经没有提供配套的事件总线bus,需要使用第三方库mitt来完成vue2中bus完成的事情
1.安装

npm install mitt

2.引用 bus.js

import mitt from 'mitt';
const bus  = mitt();
export default bus;

3.在需要使用的vue文件中导入bus

import bus from './mitt'

4.使用mitt的emit方法进行传值和on方法进行接收数据

// 父组件(兄弟组件)
bus.emit('函数名', 需要传的值)//子组件(兄弟组件)
bus.on('函数名',(接收到的值)=>{逻辑操作
})
//接收值的vue 组件卸载之前关闭掉
onBeforeUnmount(()=>{bus.off('函数名');//关闭
})//清除bus线
emitter.all.clear()

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

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

相关文章

HarmonyOS学习 第1节 DevEco Studio配置

俗话说的好,工欲善其事,必先利其器。我们先下载官方的开发工具DevEco Studio. 下载完成后,进行安装。 双击DevEco Studio,点击Next按照指引完成安装 重新启动DevEco,点击 Agree 进入环境配置,安装Node.js和ohpm 点击Ne…

MQTT 协议入门:轻松上手,快速掌握核心要点

文章目录 什么是 MQTT?MQTT 的工作原理MQTT 客户端MQTT Broker发布-订阅模式主题QoS MQTT 的工作流程开始使用 MQTT:快速教程准备 MQTT Broker准备 MQTT 客户端创建 MQTT 连接通过通配符订阅主题发布 MQTT 消息MQTT 功能演示保留消息Clean Session遗嘱消…

【WPF】使用ObservableCollection解决:累积计数x与实际计数x不相同

使用观察模式和集合 错误代码 public List<IPAddress> iPAddressDevices new List<IPAddress>();public List<IPAddress> IPAddressDevices { get > iPAddressDevices; set {iPAddressDevices value;RaisePropertyChanged(nameof(IPAddressDevices));…

spring IOC介绍

spring的Ioc真是个好东西啊&#xff0c;那它到底是什么东西呢&#xff0c;控制反转&#xff0c;到底是怎么转的呢&#xff1f; 假设啊你现在是一个导演&#xff0c;想排部戏&#xff0c;那是不是得需要演员和舞台(spring中的bean)&#xff0c;如果按平常的编程思维就是new 一个…

vue-baidu-map实现在地图上选择范围并解决相关问题

vue-baidu-map实现在地图上选择范围并解决相关问题 实现地图上选择不规则范围实现功能遇到的问题1、覆盖物多边形怎么才能盖住覆盖物点2、遇到其他问题 实现地图上选择不规则范围 这个功能比较简单&#xff0c;只需要使用vue-baidu-map插件的覆盖物多边形功能就行了。直接看文…

Win10专业版找不到安全中心选项的解决方法

在Win10电脑中&#xff0c;安全中心功能起到很大的作用。但是&#xff0c;有用户在Win10专业版电脑上找不到安全中心选项&#xff0c;从而影响到自己的正常使用。下面小编分享解决Win10专业版系统没有安全中心的简单方法&#xff0c;解决后在Win10专业版就能成功找到安全中心了…

哈希表及其基础(java详解)

目录 一、哈希表基础 二、哈希函数的设计 哈希函数的设计原则 三、java中的hashCode 基本数据类型的hashCode使用 自定义类型的hashCode使用 需要注意 四、哈希冲突的处理 链地址法Seperate Chaining 五、实现属于我们自己的哈希表 六、哈希表的动态空间处理和复杂…

通过项目管理软件监管新员工入职流程的方法与策略

项目管理软件是什么&#xff1f;项目管理软件都能做什么&#xff1f;是不是只有项目团队需要啊&#xff1f;NO&#xff01;项目管理软件乍听其名不免让人觉得这不过是个项目领域的专用工具。 那什么是项目呢&#xff1f;项目是为创造独特的产品、服务或成果而进行的体系化的工…

物联网+AI智慧工地云平台源码(SaaS模式)

智慧工地云平台充分运用数字化技术&#xff0c;聚焦施工现场岗位一线&#xff0c;依托物联网、互联网、AI等技术&#xff0c;围绕施工现场管理的人、机、料、法、环五大维度&#xff0c;以及施工过程管理的进度、质量、安全三大体系为基础应用&#xff0c;实现全面高效的工程管…

stm32中滴答定时器与普通定时器的区别

1、两者在单片机中的位置不一样 滴答定时器在内核上&#xff0c;普通定时器在外设上。 由于位置不同&#xff0c;滴答定时器的程序可以移植到所有相同内核的芯片上&#xff0c;但普通定时器的程序却不可以。 2、两者的中断优先级不一样 滴答定时器优先级高&#xff0c;普通定…

CTF刷题记录

刷题 我的md5脏了KFC疯狂星期四坤坤的csgo邀请simplePHPcurl 我的md5脏了 g0at无意间发现了被打乱的flag&#xff1a;I{i?8Sms??Cd_1?T51??F_1?} 但是好像缺了不少东西&#xff0c;flag的md5值已经通过py交易得到了&#xff1a;88875458bdd87af5dd2e3c750e534741 flag…

关于微信/支付宝等平台验签/签名sign生成算法

引言 我们在日常工作中经常会遇到对接微信平台、支付宝平台、或者自己对外开放一个api服务&#xff0c;那么这里经常会出现一个名字&#xff1a;sgin&#xff08;签名&#xff09;。 举个栗子 这是微信支付统一下单接口文档&#xff0c;最简单的理解就是&#xff0c;服务端为…

Unirest-Java:Java发起GET、POST、PUT、DELETE、文件上传,文件下载工具类介绍

一、简介 Unirest-Java是一个轻量级的HTTP客户端库&#xff0c;用于在Java应用程序中发送HTTP请求。 它提供了简单易用的API&#xff0c;可以方便地处理GET、POST、PUT、DELETE等HTTP方法。 Unirest-Java支持异步和同步请求&#xff0c;可以轻松地与JSON、XML等数据格式进行…

最优化方法复习——线性规划之对偶问题

一、线性规划对偶问题定义 原问题&#xff1a; 对偶问题&#xff1a; &#xff08;1&#xff09;若一个模型为目标求 “极大”&#xff0c;约束为“小于等于” 的不等式&#xff0c;则它的对偶模型为目标求“极小”&#xff0c;约束是“大于等于”的不等式。即“Max&#xff0…

2024年甘肃省职业院校技能大赛信息安全管理与评估三阶段理论样题一

2024年甘肃省职业院校技能大赛高职学生组电子与信息大类信息安全管理与评估赛项样题一 第六部分 理论技能与职业素养&#xff08;100 分&#xff09; 【注意事项】 1.该部分答题时长包含在第三阶段竞赛时长内&#xff0c;请在临近竞赛结束前提交。 2.参赛团队可根据自身情况…

数据库系统概论复习资料

数据库系统概论考试需知 一、分值分布 1、判断题&#xff08;10分&#xff09; 1分一个 2、填空题&#xff08;20分&#xff09; 2分一个 3、选择题&#xff08;20分&#xff09; 2分一个 4、分析题&#xff08;30分&#xff09; 第一题10分&#xff0c;第二题…

如何设置echart图表在vue页面屏幕比例缩放自适应问题

问题&#xff1a;页面的echart图表在浏览器缩放屏幕比例时无法随着屏幕的比例自动改变大小 解决方式&#xff1a; 可以通过监听窗口的 resize 事件&#xff0c;并在事件回调函数中重新调整图表的大小。 <template><div ref"chartContainer" style"w…

Enterprise Architect 12版本使用教程

Enterprise Architect 12版本使用教程 1.下载安装Enterprise Architect 122.Enterprise Architect原始DDL模板配置及存在的问题1.DDL Column Definition原始模板&#xff08;没有default值&#xff1a;可忽略&#xff09;2.DDL Data Type原始模板&#xff08;timestamp等时间字…

Apollo新版本Beta自动驾驶技术沙龙参会体验有感—百度自动驾驶开源框架

在繁忙的都市生活中&#xff0c;我们时常对未来的科技发展充满了好奇和期待。而近日&#xff0c;我有幸参加了一场引领科技潮流的线下技术沙龙&#xff0c;主题便是探索自动驾驶的魅力——一个让我们身临其境感受创新、了解技术巨擘的机会。 在12月2日我有幸参加了Apollo新版本…

智能优化算法应用:基于沙猫群算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于沙猫群算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于沙猫群算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.沙猫群算法4.实验参数设定5.算法结果6.参考文献7.…