背景

在使用Vue做后台管理系统的过程中，需要实现组件间的参数传递。Bus方式非常简洁方便，却遇到一个奇怪的现象，我单击菜单区域，需要在header中展示操作导航，内容区域做展示。结果header区域没有反应。下面我分别介绍Vue3.0如何集成Bus，同时复盘一下问题的整个过程。

Vue3.0集成Bus 

• Vue到3.0之后的Bus的方式变成了使用mitt。2.0是通过创建一个空的Vue来作为总线。
• 使用emit来注册，emitt("type","event");，可以先这样理解：第一个参数可以理解成事件名称，第二个参数通常是参数。
• 使用on来监听，on("type",“handler”=>{这里是具体操作逻辑});第一个参数同上的第一个参数要对应上，才说明一个事件。
• emitt和on是成对出现，一个发起，一个接收。
• 2.0之前是$emitt，$on，3.0去掉了$，后面给出例子
• 接收方可以是多个组件，只要第一个参数匹配都可以获取到想要的数据，这样确实很方便，也是Vue的一个优势。

方式一：全局引入

• 首先安装mitt

cnpm install --save mitt

• 在main.js中引入

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
//这里引入
import mitt from "mitt";

const app = createApp(App);
app
  .use(store)
  .use(router)
  .mount("#app");
//这里初始化
app.config.globalProperties.$bus = mitt();

• 页面中使用 ，由于是全局的，所以在使用页面中不需要再引入，直接使用。代码如下：
• 发起方：我这个例子是在选中方法中发起。

• 接收方：记住一定要写在mounted，这里一定要格外注意，千万不要写在method中，如果你用WebStorm是不会报错误的，这个bug非常不好排查，我是深受其害，费了很大劲才找到错误。

方式二：按需引入，即那个组件需要就在哪里引入，我个人比较推荐这种方式。

• 在src下新建package，命名为bus，新建bus.js

• bus.js中引入mitt，同时对外声明bus，在使用页面直接引入bus即可。

import mitt from "mitt";

const bus = mitt();

export default bus;

• 发起方：使用上的区别如图中代码

• 接收方：

总结

• Vue3.0对于Bus的正确引入和引用的两种方式都说明白了
•  也给大家分享了我遇到的一个问题，还是书写的问题
• 对于生命周期大家也要格外留心
• 我没有遇到多执行的问题，后面再说
• 如果对你有帮助，一键三联。