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

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 变更，这在多窗口或多标签页的应用中特别有用。

原文地址：https://blog.csdn.net/qq_33911541/article/details/142374531

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！