vue3 组件间的消息传递（事件总线）

前言：刚开始学vue语言，在组件间传递消息时需要有一个事件总线，但是使用vue2的$emit、$on、$off 和 $once，在创建新的Vue实例时会报错：

        "export 'default' (imported as 'Vue') was not found in 'vue'

vue2的消息传递是创建Vue实例，并用自己创建Vue实例实现组件内部监听，如下：

msg.js

import Vue from 'vue'
export default new Vue

A.vue

import Msg from './Msg.js'
	
	export default{
		methods:{
			menu1:function(){
				Msg.$emit("val","1");
			},
			menu2:function(){
				Msg.$emit("val","2");
			}
		}
	}

B.vue

import Msg from './Msg.js'
	
	export default{
		data(){
			return{
				value:0
			}
		},
		mounted:function(){
			/* this表示当前vue;_this表示创建一个副本 */
			var _this = this
			Msg.$on('val', function(m){
				/* 当前$on事件内,this表示的是当前$on的操作，而不是整个vue，所以使用—_this副本表示当前vue */
				_this.value= m;
			})
		}
	}

但是在cli4中，会报错

"export 'default' (imported as 'Vue') was not found in 'vue'

在网上搜索大量资料没有找到合理的解决方法，只能一点点翻阅官方文档；终于在vue3的迁移中找到了答案：

所以 vue2的事件总线的实现方式在vue3中并不能使用，需要使用vue3推荐的外部库，集成与使用的链接如下：

1.mitt 的继承与使用

2.tiny-emitter的集成与使用

这里展示一下个人集成tiny-emitter和使用：

• 在对应项目的目录下安装命令：npm install tiny-emitter --save-dev

        安装成功后在node_modules包下可以找到tiny-emitter文件夹

• 创建Bus.js文件：

import emitter from 'tiny-emitter/instance'

export default {
  $on: (...args) => emitter.on(...args),
  $once: (...args) => emitter.once(...args),
  $off: (...args) => emitter.off(...args),
  $emit: (...args) => emitter.emit(...args)
}

• $emit

import Bus from './Bus.js'

export default{
		methods:{
			menu1:function(){
				Bus.$emit("val","1");
			},
			menu2:function(){
				Bus.$emit("val","2");
			}
		}
}

• $on

	import Bus from './Bus.js'
	
	export default{
		data(){
			return{
				value:0
			}
		},
		mounted:function(){
			/* this表示当前vue;_this表示创建一个副本 */
			var _this = this
			Bus.$on('val', function(m){
				/* 当前$on事件内,this表示的是当前$on的操作，而不是整个vue，所以使用—_this副本表示当前vue */
				_this.value = m;
			})
		}
	}