前言:刚开始学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;
			})
		}
	}

Logo

前往低代码交流专区

更多推荐