EventEmitter3在vue中的使用

前提

vue中的组件传递方式有很多，包括父子组件之间的传值（props，emit）、事件总线（$ bus）、状态管理模式（vuex，pinia），现在推荐一种可以替代$bus的一种传值方式——eventemitter3

---

安装

npm i eventemitter3 --save 
1

使用

在utils目录下新增 event.js文件
event.js

import EventEmitter from 'eventemitter3'

export default new EventEmitter()
1
2
3

在需要传递消息的组件中使用
**.vue

...
import event from '@/mixins/event.js'

...
created () {
	event.emit('getList', 'hello world')
},
destoryed () {
	event.removeListener('getList');
}
1
2
3
4
5
6
7
8
9
10

注：在页面进行跳转的时候，要进行事件的解绑

在接收的组件中使用
**.vue

...
import event from '@/mixins/event.js'

...
created () {
	event.on('GetTitle', (e) => {
      console.log('-------------------', e)
    })
}
1
2
3
4
5
6
7
8
9

---

总结

eventBus和EventEmiiter的区别

eventBus 的使用范围更加广泛，可以跨越不同组件和模块之间进行信息通信传递,它是一个全局概念的事件总线。通常作为一个单例对象存在，因此往往需要创建一个中央管理器的实例
EventEmitter 是一个基于类的模块,用于在单个组件或模块内部实现事件的发布和订阅。所以它可以在需要的地方创建实例对象，并将其用于内部事件的发布和订阅