前提
vue中的组件传递方式有很多,包括父子组件之间的传值(props,emit)、事件总线($ bus)、状态管理模式(vuex,pinia),现在推荐一种可以替代$bus的一种传值方式——eventemitter3
安装
npm i eventemitter3 --save
使用
在utils目录下新增 event.js文件
event.js
import EventEmitter from 'eventemitter3'export default new EventEmitter()
在需要传递消息的组件中使用
**.vue
...
import event from '@/mixins/event.js'...
created () {event.emit('getList', 'hello world')
},
destoryed () {event.removeListener('getList');
}
注:在页面进行跳转的时候,要进行事件的解绑
在接收的组件中使用
**.vue
...
import event from '@/mixins/event.js'...
created () {event.on('GetTitle', (e) => {console.log('-------------------', e)})
}
总结
eventBus和EventEmiiter的区别
eventBus
的使用范围更加广泛,可以跨越不同组件和模块之间进行信息通信传递,它是一个全局概念的事件总线。通常作为一个单例对象存在,因此往往需要创建一个中央管理器的实例
EventEmitter
是一个基于类的模块,用于在单个组件或模块内部实现事件的发布和订阅。所以它可以在需要的地方创建实例对象,并将其用于内部事件的发布和订阅