• (有代码示例)Vue 或 JavaScript中使用全局通信的3种方式


    在 Vue 或 JavaScript 应用中,可以使用以下库来实现全局事件通信:

    1. Vue.js 中的 EventBus: 在 Vue.js 中,可以使用 EventBus 来实现全局事件通信。EventBus 是一个 Vue 实例,用于在组件之间传递事件。你可以使用 $on$emit$off 方法来监听、触发和移除事件。
    // 创建 EventBus
    const EventBus = new Vue();
    
    // 在组件 A 中监听事件
    EventBus.$on('my-event', (payload) => {
      console.log('Event received:', payload);
    });
    
    // 在组件 B 中触发事件
    EventBus.$emit('my-event', { message: 'Hello from Component B' });
    
    // 移除事件监听器
    EventBus.$off('my-event');
    
    1. Vuex: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。使用 Vuex,你可以在应用的所有组件之间共享状态。通过在 Vuex store 中定义 actions 和 mutations,你可以实现全局事件通信。
    // 创建 Vuex store
    const store = new Vuex.Store({
      state: {
        message: ''
      },
      mutations: {
        setMessage(state, payload) {
          state.message = payload;
        }
      },
      actions: {
        updateMessage({ commit }, payload) {
          commit('setMessage', payload);
        }
      }
    });
    
    // 在组件 A 中触发 action
    this.$store.dispatch('updateMessage', 'Hello from Component A');
    
    // 在组件 B 中获取共享状态
    const message = this.$store.state.message;
    
    1. mitt: mitt 是一个非常轻量级的、独立于框架的事件总线库,可以用于实现全局事件通信。它提供了 onoffemit 方法来监听、移除和触发事件。
    import mitt from 'mitt';
    
    // 创建 EventBus
    const EventBus = mitt();
    
    // 监听事件
    EventBus.on('my-event', (payload) => {
      console.log('Event received:', payload);
    });
    
    // 触发事件
    EventBus.emit('my-event', { message: 'Hello from Component A' });
    
    // 移除事件监听器
    EventBus.off('my-event');
    

    这些库都可以实现全局事件通信,选择哪个库取决于你的需求和项目类型。在 Vue.js 项目中,EventBus 是一种简单的解决方案,而 Vuex 提供了更强大的状态管理功能。如果你需要一个独立于框架的轻量级事件总线库,mitt 是一个很好的选择。

  • 相关阅读:
    室内温度控制仿真(Simulink+PLC)
    MySQL中的事务
    【PCL-11】提取平面上层的目标物,剔除平面下层目标物
    【IoT】产品经理:人性洞察的底层逻辑
    maptalks--热力分析、聚合分析
    PMP成绩如何查询?
    总结:从实模式到保护模式的流程和相关寄存器,相关数据结构之间的联系
    JAVA整理学习实例(四)数据结构
    可视化表格软件-FineReport图表跨sheet引用单元格数据
    RocketMQ源码阅读(五)MappedFileQueue
  • 原文地址:https://blog.csdn.net/lalala8866/article/details/139438652