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

server/2024/9/23 19:42:18/

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/server/120952.html

相关文章

Redis面试常见问题

1.Redis的常用类型 Redis常用的类型也就那五个&#xff0c;我想经常看各大八股文的小伙伴&#xff0c;应该都熟练于心了吧&#xff01;它们分别是String、Hash、List、Set、ZSet&#xff1b;接下来跟我一起分析这五大常用类型 String数据类型格式&#xff1a;key valueHash数…

活动报名| 探索存内计算的未来,共话AGI时代

活动日期&#xff1a;2024年09月28日 下午一点到6点 地点&#xff1a;杭州技术转移中心 三楼路演厅 议程亮点&#xff1a; 存内计算技术架构以及最新趋势AGI开源项目交流存内计算实操上板体验 存内计算 ——突破物理极限的下一代算力技术 直接消除“存”“算”界限&…

【算法思想·二叉树】最近公共祖先问题

本文参考labuladong算法笔记[拓展&#xff1a;最近公共祖先系列解题框架 | labuladong 的算法笔记] 0、引言 如果说笔试的时候经常遇到各种动归回溯这类稍有难度的题目&#xff0c;那么面试会倾向于一些比较经典的问题&#xff0c;难度不算大&#xff0c;而且也比较实用。 本…

爱因斯坦到底说过?没说过?人类认知之源在何处

目录 说过&#xff1f;没说过&#xff1f;说过&#xff01;没说过&#xff01; 个人想法说过&#xff01; 参考链接及文献 说过&#xff1f;没说过&#xff1f; 近来研究大脑发育&#xff0c;遇到了一个问题就是为什么大脑可以认识世界&#xff0c;其次才是如何认识世界。记得…

Git可视化工具和基础命令

简介 TortoiseGit 是一款专为 Windows 系统设计的 Git 可视化工具&#xff0c;它通过在资源管理器中添加右键菜单选项&#xff0c;使用户能够轻松地执行 Git 操作&#xff0c;而无需记忆复杂的命令行指令。以下是对 TortoiseGit 的详细分析&#xff0c;以帮助用户更好地理解和…

Leetcode 除自身以外数组的乘积

class Solution {public int[] productExceptSelf(int[] nums) {int length nums.length;//一维数组 answer[]存储最终的结果//首先从左往右记录乘积&#xff0c;暂时存储到一维数组 answer[] 中int[] answer new int[length];//先从左往右, 由于由于第一个元素左边没有元素&…

深度学习——基础知识

深度学习的重点在于优化&#xff0c;其中很重要的步骤在于如何调参&#xff0c;会涉及到一些微积分等数学知识。不同于以往接触到的数值运算&#xff0c;深度&#xff08;机器&#xff09;学习都是关于张量Tensor&#xff08;向量&#xff09;的计算&#xff0c;Python中最常用…

Redis---关闭Redis服务端

简介 使用命令关闭Redis服务端。 命令 redis-cli -a 111111 -p 6370 shutdown参数解释&#xff1a; -a&#xff1a;Redis密码 -p&#xff1a;Redis端口 shutdown&#xff1a;关闭命令