vue3事件总线mitt使用方式

我的使用场景

在项目中遇到一个这样的问题。页面使用了keepalive缓存, 员工排班和班次之间的数据有关联,当我删除一个班次后,给员工排的班,属于那个被删的班次的情况,已经生效的不会受影响,但是未生效的排班会被删除。如果我不重新拉取后端数据的话,我从班次页面切换到员工排班页面,我前端的排班还是存在的,但是后端的数据已经删除了。这个时候用户点击删除排班,就会出现不友好的提示,我需要避免这个情况。这就需要再删除班次的时候,重新拉取员工排班列表的数据了。

使用方法
安装mitt
npm install mitt
创建一个事件总线

在你的项目中创建一个事件总线,可以将其放在一个单独的文件中,例如 eventBus.js

// eventBus.js
import mitt from 'mitt';
export const eventBus = mitt();
在员工排班中监听事件

监听来自事件总线的事件,然后调用相应的方法,记得要在页面销毁的时候,取消监听。

// schedule.vue
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { eventBus } from '@/path/to/eventBus';		// 这个路径需要对应上export default {setup() {const search = () => {// 在这里执行方法console.log('方法被调用');};onMounted(() => {eventBus.on('getScheduleSearch', search);});// 在页面被销毁的时候,取消监听onBeforeUnmount(() => {eventBus.off('getScheduleSearch', search);});return {};},
};
在班次页面中触发事件

触发事件,通知员工排班页面执行方法。

// shift.vue
import { ref } from 'vue';
import { eventBus } from '@/path/to/eventBus';		// 这个路径需要对应上export default {setup() {// 假设这是我删除班次的方法const deleteShift = () => {// 在这里触发事件,通知员工排班页面执行方法。eventBus.emit('getScheduleSearch');};return { getScheduleSearch };},
};

这样,你就可以在班次页面中调用 deleteShift 方法时,员工排班页面中的 search 方法就会被触发。这是一种基于事件的简单而灵活的通信方式,适用于不同组件之间的解耦。

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

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

相关文章

学习使用echats实现双刻度echarts双Y轴,左右Y轴数据的方法

学习使用echats实现双刻度echarts双Y轴&#xff0c;左右Y轴数据的方法 代码效果图 代码 <!--此示例下载自 https://echarts.apache.org/examples/zh/editor.html?cline-stack&langjs --> <!DOCTYPE html> <html lang"en" style"height: 10…

Visual Studio 任务列表

任务列表 帮助我们快速找到注释位置&#xff08;用在需要反复查找修改的地方&#xff09; 使用//todo&#xff1a;注释的内容就会显示在任务列表中。 任务列表如何打开&#xff1f; 视图—任务列表 &#xff08;CTRlwt&#xff09; 创建自定义令牌&#xff1a; 在 “工具”…

学习路径概览

根据codewave 低代码官方的资料&#xff0c;我们以一个简单的初级采购管理系统为例&#xff0c;带大家进行学习。学习的案例框架如下&#xff1a; https://ik4mh7u2np.feishu.cn/docx/NjyEd9qD5oElkoxJhapc3fV4nPe?fromfrom_copylink​​​​​​​ 主要分为以下四个学习模块

L1-075:强迫症

题目描述 小强在统计一个小区里居民的出生年月&#xff0c;但是发现大家填写的生日格式不统一&#xff0c;例如有的人写 199808&#xff0c;有的人只写 9808。有强迫症的小强请你写个程序&#xff0c;把所有人的出生年月都整理成 年年年年-月月 格式。对于那些只写了年份后两位…

Taro +vue3 中跳转页面 如何带一个数组或者对象进入下一个页面 解码或者编码

1. 需求 在我开发H5 的过程中 发现 有些接口 后端的接口提供不了 或者其他的原因 发现一些详情的页面 我没有接口 数据获取不到 需要用到的是 那种列表数据 所以只能用跳转的方式 实现这个功能. 2. Taro.nagivate() 跳转: Taro.navigateTo({url: /pages/order-detail/index…

Centos7部署Keepalived+lvs服务

IP规划&#xff1a; 服务器IP地址主服务器20.0.0.22/24从服务器20.0.0.24/24Web-120.0.0.26/24Web-220.0.0.27/24 一、主服务器安装部署keepalivedlvs服务 1、调整/proc响应参数 关闭Linux内核的重定向参数&#xff0c;因为LVS负载服务器和两个页面服务器需要共用一个VIP地…

『番外篇八』SwiftUI 脑洞大开实现“另类”视图跟随方法

概览 在 SwiftUI 的开发中,我们时常需要用指尖丝滑般地操作指定视图:比如,我们需要在拖动视图后让它自动归位,或者拖动一个视图时让另一个视图跟随它移动。 我们随后将会详细讨论上述两个 SwiftUI 中与视图移动相关场景的实现。 在本篇博文中,您将学到如下内容: 概览1.…

python期刊稿件在线投稿系统q2ud0

本系统的用户可分为管理员、投稿者、审稿人和编辑四个用户角色组成。管理员可以管理系统内所有功能&#xff0c;主要有个人中心、投稿者管理、审稿人管理、编辑管理、个人稿件管理、审核稿件管理、稿件信息管理、类型管理等功能&#xff1b;编辑登录系统主要有个人中心、审核稿…

四种常见智能指针的介绍

一、介绍 当类中有指针成员时&#xff0c;一般有两种方式来管理指针成员&#xff1a;一是采用值型的方式管理&#xff0c;每个类对象都保留一份指针指向的对象的拷贝&#xff1b;另一种更优雅的方式是使用智能指针(smart pointer)&#xff0c;从而实现指针指向的对象的共享。 …

统信系统常见问题解决方法

☞ ░ 前往老猿Python博客 ░ https://blog.csdn.net/LaoYuanPython 背景说明 本文所说的问题&#xff0c;是基于浪潮统信UOS的环境存在的问题。 一、WPS新建文档默认保存格式不对 解决办法&#xff1a; 1.编辑/opt/apps/cn.wps.wps-office-pro/files/kingsoft/wps-office/…

Element-Ui树形数据懒加载,删除到最后一个空数组不刷新问题

使用elemenui树形删除数据的时候刷新页面&#xff0c;我在网上找了好多方法&#xff0c;要么没用&#xff0c;要么都是部分代码&#xff0c;自己又看不懂&#xff0c;不得不硬着头皮看源码&#xff0c;发现了有个方法可以刷新。 使用elemenui树形删除数据的时候刷新页面。源码里…

UML类图学习

UML类图学习 UML类图是描述类之间的关系概念1.类(Class)&#xff1a;使用三层矩形框表示2.接口(interface)&#xff1a;使用两层矩形框表示&#xff0c;与类图主要区别在于顶端有<<interface>>显示3、继承类&#xff08;extends&#xff09;&#xff1a;用空心三角…

蓝桥杯C/C++程序设计——单词分析

题目描述 小蓝正在学习一门神奇的语言&#xff0c;这门语言中的单词都是由小写英文字母组 成&#xff0c;有些单词很长&#xff0c;远远超过正常英文单词的长度。小蓝学了很长时间也记不住一些单词&#xff0c;他准备不再完全记忆这些单词&#xff0c;而是根据单词中哪个字母出…

Pytest 项目结合Jenkins

一、window安装centos7虚拟机 参考网上其他教程 二、Linux安装Jenkins 进入jenkins.io网址&#xff0c;点击download&#xff0c;选择CentOS版本 1、Linux中安装java环境和git Jenkins的运行需要java环境&#xff1b;安装git是为代码上传给仓库做准备&#xff1b; yum - y…

C语言-环境搭建

文章目录 内容Notepad的安装gcc编译工具的配置 编写软件的安装&#xff1a;软件传送门&#xff1a;Notepad软件选择一个合适的路径&#xff0c;一键傻瓜式安装即可 编译工具gcc在windows环境下的配置&#xff1a;解压gcc编辑工具包解压出来的mingw64文件放到一个合适的磁盘路径…

15. 附录

15. 附录 15.1. 交互模式 15.1.1. 错误处理 有错误发生时&#xff0c;解释器会打印一个错误信息和栈跟踪器。在交互模式下&#xff0c;它返回主提示符&#xff0c;如果从文件输入执行&#xff0c;它在打印栈跟踪器后以非零状态退出。(异常可以由 try 语句中的 except 子句来…

华为HCIE-Datacom课程介绍

厦门微思网络HCIE-Datacom课程介绍 一、认证简介 HCIE-Datacom&#xff08;Huawei Certified ICT Expert-Datacom&#xff09;认证是华为认证体系中的顶级认证&#xff0c;HCIE-Datacom认证定位具备坚实的企业网络跨场景融合解决方案理论知识&#xff0c;能够使用华为数通产品…

副业类小报童热门专栏TOP15

今天介绍15个副业小报童&#xff0c;可以说是当前小报童平台&#xff0c;副业类专栏的天花板内容了 这些专栏&#xff0c;都有免费内容可以查看&#xff0c;而且还是3天无理由退款的&#xff0c;完全可以尝试着订阅一波 关键单价都非常亲民&#xff0c;怎么都不亏&#xff01…

安装与部署Hadoop

一、前置安装准备1、机器2、java3、创建hadoop用户 二、安装Hadoop三、环境配置1、workers2、hadoop-env.sh3、core-site.xml4、hdfs-site.xml5、linux中Hadoop环境变量 四、启动hadoop五、验证 一、前置安装准备 1、机器 主机名ip服务node1192.168.233.100NameNode、DataNod…

洛谷——P3879 [TJOI2010] 阅读理解(STL:hash+set,c++)

文章目录 一、题目[TJOI2010] 阅读理解题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 二、题解基本思路&#xff1a;代码 一、题目 [TJOI2010] 阅读理解 题目描述 英语老师留了 N N N 篇阅读理解作业&#xff0c;但是每篇英文短文都有很多生词需要查字典&am…