Vue事件总线(EventBus)使用详细介绍

一、Vue事件总线(EventBus)使用详细介绍

1、Vue应用中，当父子组件间的通信不再是主要需求，而需要实现无关联页面间的通信时，事件总线（EventBus）就派上了用场。它就像一个组件间的公共通信中心，所有组件都可以通过它发送和接收事件，实现平行的通讯。

2、EventBus的使用分为初始化和实际操作两部分。初始化时，可以创建一个单独的.js文件（如event-bus.js），或者在main.js中全局初始化。EventBus本质上是一个轻量级的组件，没有DOM关联，只提供实例方法。

3、发送事件时，比如A页面点击按钮，通过$emit方法触发一个事件，如'sendMsg'，附带消息内容。B页面则通过$on监听这个事件，接收并处理消息。然而，EventBus的滥用可能引发维护难题，比如页面刷新后EventBus被销毁，或者频繁操作导致事件监听过多。因此，确保在组件销毁时移除事件监听是必要的。

4、创建全局EventBus的方法是使用$on和$emit，发布和订阅事件。在需要发送消息的组件中，使用$emit，而在接收消息的组件中，使用$on。移除特定事件监听时，可以用$off方法，或干脆$off()移除所有事件监听。

5、总的来说，通过实例化和使用EventBus，Vue组件可以实现跨页面的简单通讯。虽然全局EventBus能简化操作，但在大型项目中，可能需要更高级的解决方案，如Vuex，以管理共享状态。本文介绍了EventBus的基本用法，作者向建峰_Javan的更多内容可在慕课网找到原文链接。

二、vue EventBus使用方法

EventBus，作为组件间通信的关键工具，采用发布者-订阅者模式运作，允许在一处触发事件，让其他组件接收并响应。它简化了跨组件间的交互，且无需额外的缓存处理，代码量少，灵活性高。

然而，在使用时需要注意，为了防止内存泄漏，订阅事件的组件必须在销毁前手动解除监听。否则，可能会导致意外的多次执行。

首先，创建一个名为bus.js的文件，用于封装EventBus的行为：

在vue3.x版本中，由于$on、$off和$once等API被移除，原生EventBus无法直接使用。此时，推荐采用第三方插件mitt来替代。首先，需要在项目中安装mitt插件，通过命令行输入：

接下来，发送事件的页面应调用mitt提供的方法：

而订阅事件的页面则会订阅并处理这些事件：

三、vue3如何集成bpmn.js

1、Vue3集成BPMN.js实现流程可视化，具体步骤如下：

2、首先，在Vue3中引入BPMN.js依赖，可以通过npm或yarn安装：

3、npm install bpmn-js或者 yarn add bpmn-js

4、在Vue代码中加载BPMN.js，代码如下：

5、import BpmnJS from'bpmn-js/dist/bpmn.js';

6、import'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';

7、实例化BPMN.js并挂载到指定容器。加载流程图XML文件，绑定鼠标事件并执行自定义操作，如下：

8、import BpmnJS from'bpmn-js/dist/bpmn.js';

9、import'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';

10、this.bpmnJS.importXML('bpmn-diagram.xml',(err)=>{

11、const canvas= this.bpmnJS.get('canvas');

12、const overlays= this.bpmnJS.get('overlays');

13、const eventBus= this.bpmnJS.get('eventBus');

14、canvas.zoom('fit-viewport');

15、//给task添加自定义标签和监听器

16、eventBus.on('element.click',(event)=>{

17、const taskListeners= element.businessObject.extensionElements.values.filter((ele)=> ele.$type==='custom:taskListeners')[0];

18、通过事件处理，实现流程图中的任务元素点击时展示自定义标签及监听器。在template中，创建一个div容器，并将BPMN.js实例挂载到div上。

19、总的来说，Vue3集成BPMN.js实现流程可视化简单易行，通过依赖引入、事件绑定和模板挂载即可完成。此方法为需要使用BPMN.js和Vue3的开发者提供了一种快速实现流程可视化的解决方案。