背景

Vue3.0集成Bus 

方式一：全局引入

• 首先安装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;

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

• 接收方：

总结