vue3 组件间的消息传递(事件总线)
前言:刚开始学vue语言,在组件间传递消息时需要有一个事件总线,但是使用vue2的$emit、$on、$off和$once,在创建新的Vue实例时会报错:"export 'default' (imported as 'Vue') was not found in 'vue'vue2的消息传递是创建Vue实例,并用自己创建Vue实例实现组件内部监听,如下:msg.jsimport Vue from
·
前言:刚开始学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推荐的外部库,集成与使用的链接如下:
这里展示一下个人集成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;
})
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)