在Vue中可以使用 EventBus 来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件
使用
1 初始化 创建 js文件
import Vue from 'vue'
var Event = new Vue();
export default Event;
2 发送事件
//引入 Eevent 模块
import Event from '../../public/event'
Event.$emit('Component1','msg')
3.接收
//引入 Eevent 模块
import Event from '../../public/event'
Event.$on('Component1',(v)=>{
console.log(v);
})
实质上EventBus是一个不具备 DOM 的组件,它具有的仅仅只是它实例方法而已,因此它非常的轻便。
全局
在 main.js 中添加
//全局事件总线,创建一个vue实例,挂载到根实例
const Event = new Vue()
Vue.prototype.Event = Event;
// 发送
this.Event.$emit('Component2','我是组件2的数据')
// 接收
this.Event.$on('Component2',function(item){
console.log(item);
})
EventBus 问题
vue是单页应用,如果你在某一个页面刷新了之后,与之相关的EventBus会被移除,这样就导致业务走不下去。还要就是如果业务有反复操作的页面,EventBus在监听的时候就会触发很多次,也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到,在vue页面销毁时,同时移除EventBus事件监听。
EventBus.
o
f
f
(
‘
C
o
m
p
o
n
e
n
t
1
’
)
来
移
除
应
用
内
所
有
对
此
某
个
事
件
的
监
听
E
v
e
n
t
B
u
s
.
off(‘Component1’) 来移除应用内所有对此某个事件的监听 EventBus.
off(‘Component1’)来移除应用内所有对此某个事件的监听EventBus.off() 来移除所有事件频道,不需要添加任何参数