vue事件总线取消了吗

本文讲解"vue事件总线取消了吗",希望能够解决相关问题。

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

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

关于 "vue事件总线取消了吗" 就介绍到此。希望多多支持编程宝库

本文讲解"vue支不支持ie6",希望能够解决相关问题。vue不支持ie6;vue官方声明是支持ie8以上版本的。不支持原因:1、ie8及以下版本不支持“Object.defineProperty”方法,但该方法是vu ...