vue 中互相不关联的两个组件怎么进行通信(数据传输)

news/2024/9/23 19:45:03/

1、Vuex
Vuex 是 Vue 官方的状态管理模式与库。通过使用 Vuex,可以将组件间共享的数据存储在一个全局的状态树中,任何组件都可以读取这个状态,通过提交 mutations 或 dispatch actions 来修改状态。

2、Event Bus (事件总线)
创建一个全局的 Vue 实例作为事件总线(Event Bus),用来触发和监听事件。组件 A 可以通过 $bus.$emit 触发事件,组件 B 则可以通过 $bus.$on 来监听这些事件,从而实现数据的传递。

1、在src/assets/js文件中新建eventBus.js内容如下:
import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;2、在点击navbarPv组件的功能时把默认选中样式定位到第一个模块下的第一个功能菜单上
a、在navbar组件中引入eventBus.js文件
import EventBus from '@/assets/js/eventBus'b、实现点击监听<ul class="headMenu"><li><i class="menuIcon"></i><h4 class="fonts" @click="goDomain">功能</h4></li><li>用户</li>
</ul>goDomain() {// this.$router.push({path: "/mon_powerstation"});//通过事件总线触发名为 handleSelected 的事件,并传递参数 '2-1'。作用是通知其他监听此事件的组件(leftBar.vue)或对象进行相应处理。EventBus.$emit('handleSelected', '2-1');window.location = '#/mon_powerstation'
},3、在leftBarPv.vue组件中引入eventBus.js文件
<el-menu class="leftbarPv" :unique-opened="true" :default-active="active" :collapse="isCollapse" @select="handleSelect"></el-menu>import EventBus from '@/assets/js/eventBus'
created() {//监听 EventBus 上名为 handleSelected 的事件。
//当该事件被触发,并携带参数 menuId 时,会调用当前组件实例中的 handleSelect 方法,并将 menuId //作为参数传递给该方法。EventBus.$on('handleSelected', (menuId) => {this.handleSelect(menuId);});
}beforeDestroy() {//在组件销毁前取消监听'handleSelected'事件。具体功能如下://确保组件销毁时,解除对该事件的绑定,避免内存泄漏。//使用EventBus作为事件总线,实现组件间通信。EventBus.$off('handleSelected');},

3、Props + 自定义事件
如果两个组件有一个共同的父组件,可以通过父组件作为中介,使用 props 向下传递数据,然后使用自定义事件 $emit 从子组件向上传递数据。

4、使用全局对象或混入
可以创建一个全局可访问的对象或者使用 Vue 混入(mixin)来存储共享数据,但这不是推荐的做法,因为它可能会导致状态管理变得难以追踪。

5、Web Storage 通信
使用 HTML5 Web Storage 事件(storage event)来监听其他窗口或标签页中的 localStorage 变更,这在多窗口或多标签页的应用中特别有用。


http://www.ppmy.cn/news/1529461.html

相关文章

一文了解高速工业相机

超高速相机是工业相机的一种&#xff0c;一般高速相机指的是数字工业相机&#xff0c;其一般安装在机器流水线上代替人眼来做测量和判断&#xff0c;通过数字图像摄取目标转换成图像信号&#xff0c;传送给专用的图像处理系统。 超高速工业相机的采集速率> 50Gb/s&#xff…

无线安全(WiFi)

免责声明:本文仅做分享!!! 目录 WEP简介 WPA简介 安全类型 密钥交换 PMK PTK 4次握手 WPA攻击原理 网卡选购 攻击姿态 1-暴力破解 脚本工具 字典 2-Airgeddon 破解 3-KRACK漏洞 4-Rough AP 攻击 5-wifi钓鱼 6-wifite 其他 WEP简介 WEP是WiredEquivalentPri…

2-96 基于matlab的SMOTE数据扩充算法

基于matlab的SMOTE数据扩充算法&#xff0c;主动设置数据扩充百分比&#xff0c;并考虑最近邻居数进行扩充&#xff0c;计算样本到他所在类样本集中所有样本距离&#xff0c;从样本的K近邻中随机选择若干样本添加到扩充样本集。程序已调通&#xff0c;可直接运行。 下载源程序…

Oracle 19c 安装教程学习

Oracle 19c 安装教程学习 &#xff08;最新&#xff09; 很久没有用Oracle 我记得用的时候还是 2021年 &#xff0c;那个时候用的 Oralce 11g 。 今天本人实测安装 。 今天的学习目标就是教大家怎么安装 。直接上图 19c下载地址&#xff1a;https://www.oracle.com/cn/databa…

linux-虚拟化与容器化-虚拟化

Linux 虚拟化与容器化&#xff1a;虚拟化 在 Linux 系统中&#xff0c;虚拟化是一项非常重要的技术&#xff0c;它允许在单一物理硬件上运行多个操作系统或虚拟机&#xff08;VM&#xff09;。虚拟化不仅能够提高硬件资源的利用率&#xff0c;还能够提供隔离性、安全性和可移植…

基于yolov8的红外小目标无人机飞鸟检测系统python源码+onnx模型+评估指标曲线+精美GUI界面

【算法介绍】 基于YOLOv8的红外小目标无人机与飞鸟检测系统是一项集成了前沿技术的创新解决方案。该系统利用YOLOv8深度学习模型的强大目标检测能力&#xff0c;结合红外成像技术&#xff0c;实现了对小型无人机和飞鸟等低空飞行目标的快速、准确检测。 YOLOv8作为YOLO系列的…

5款好用的电脑软件,个个良心实用

分享5款好用但冷门的windows软件&#xff0c;个个良心实用&#xff0c;而且大部分免费&#xff0c;值得统统装进电脑里&#xff01; 1、EagleGet——高速下载器 一款免费的高速下载软件&#xff0c;页面设计简洁&#xff0c;没有广告&#xff0c;支持 HTTP、HTTPS、FTP、MMS、…

P1706 全排列问题(dfs+递归)

1. x表示层数&#xff0c;第一层选了1执行for1&#xff0c;进入第二层选2并标记2&#xff0c;第二层只进行到for2&#xff0c;进入第三层选3并标记3&#xff0c;选完之后删除标记3。到现在完成第一组123 2.之后回到第二层释放2再进行for3,第二层选择3&#xff0c;第三层执行到…