vue事件总线废除了吗

vue3取消了全局事件总线，废除原因是安全性低。全局事件总线是一个全局任意组件通信技术，即任意组件间的通信均可实现。在vue3中，如果想要使用全局事件总线，需要引入第三方库mitt或tiny-emitter。

本教程操作环境：windows7系统、vue3版，DELL G3电脑。

vue3取消了全局事件总线，原因是安全性低。

vue的全局事件总线

全局事件总线，是一个全局任意组件通信技术。

顾名思义，任意组件间通信，均可实现。

它通信是通过一个傀儡去实现的，一个所有组件均可访问到的傀儡，vue中命名叫 $bus

在vue2中

我们可以直接在 入口文件 mian.js 中使用生命周期钩子 beforecreated
直接创建 $bus

beforeCreate() { 	Vue.prototype.$bus = this }

记得把钩子写在 挂载之前即可。

使用时：

• 在需要接收数据的组件中使用 mounted钩子绑定事件监听

mounted() {   this.$bus.$on('hello',(data) => {     console.log(data);   }) },

• 在需要发送数据的组件中需要发送的操作中触发该方法即可

methods: {   sendStudentName(){     this.$bus.$emit('hello',this.name)   } },

• 还没完，如果组件销毁，记得解绑事件，在哪绑定就在哪解绑，使用beforeDestroy钩子

beforeDestroy() {   this.$bus.$off('hello') },

在vue3

在vue3中，取消了全局事件总线，如果想要使用，我们需要引入第三方库 mitt或tiny-emitter

1、安装mitt库

npm i mitt -s

2、在根目录封装一个 js 文件，以便组件中导入使用

文件起名最好见名知义 例如 eventBus.js

内容：

//导入 import mitt from 'mitt';  //定义,定义也最好见名知义 const emitter = mitt();  //暴露 export default emitter;

3、使用

1）相互通信的组件均需要导入js

import emitter from '../../eventBus'

2） 接收数据的组件 在setup（）中绑定事件监听

setup(){   emitter.on('event',(info) => {     ...   })   return{} }

这里的箭头函数，换成普通函数也可

3）发送数据的组件触发即可传递数据

setup(){ 	function send(info) { 		emitter.emit('event',info) 	) 	return{} }

4）组件销毁前，解绑事件，

onBeforeUnmount(()=>{ 	emitter.off("event", onEvent); })

如果使用普通函数，则把该函数也在第二个参数的位置，如果是箭头函数，则不用写。如上 onEvent

【