Vue2和Vue3组件间通信方式汇总（3）------$bus

 组件间通信方式是前端必不可少的知识点，前端开发经常会遇到组件间通信的情况，而且也是前端开发面试常问的知识点之一。接下来开始组件间通信方式第三弹------$bus,并讲讲分别在Vue2、Vue3中的表现。

Vue2+Vue3组件间通信方式汇总（1）------props

Vue2+Vue3组件间通信方式汇总（2）------$emit

一、全局总线$bus 原型链

归根结底就是在vm，vue原型链上注册一个名叫$bus 的对象，再把this，就是vm实例对象赋给$bus，其中$on $emit $off等就是全局可以读可写的变量,即可实现，相关组件、不相关组件之间数组地传递。

------Vue2 

main.js文件中，Vue实例下，往Vue原型链上注册属性：$bus

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this//注册全局事件总线
	}
})

其中一个组件：调用全局总线的$emit：

 另一个组件：调用全局总线的$on：

 ------Vue3   不存在vm所以需要引入mitt插件

npm install mitt

在bus.ts文件中引入： 

import mitt from "mitt"
//mitt是一个函数，赋给命名为$bus的变量
const $bus=mitt();
//向外暴露这个变量
export default $bus

 其中一个组件：

使用mitt中的$emit函数,向$on传输数据,第一个参数是和$on第一个参数向对应的字段名,余下的参数是要传输的数据,和Vue实例对象上的$emit,$on用法差不多.

 另一个组件：$on接收数据