vue2和vue3的全局事件总线

vue2里面的全局事件总线
1，在main.js文件里面调用生命周期函数beforeCreate

在new.Vue实例中
....
beforeCreate(){
Vue.propotype.$name = this //这个name是可以随便更改的，可以使用你想用的名字
....

2，在组件1中的methods创建一个函数调用，或者说在mounted里面直接调用，都可以

this.$name.$emit('a'，'我是要在组件2显示的值')

这里是使用你的全局事件总线 name 是使用 emit 触发事件 a ，这边第二个值就是你想要传输的值，也可以使用你双向绑定的值

3，在组件2中，使用mounted函数$on进行监听

this.$name.$on('a',(data)=>console.log(data)

组件2第二个值是一个函数，data的值就是组件1传过来的值，直接可以打印

vue3中，取消了全局事件总线，如果想要使用全局事件总线，那么就需要使用一个插件mitt

我这里使用的是mitt@3.0.0，工具是vscode

1，首先安装mitt

npm i mitt -s

2，安装完成后，根目录新建一个文件夹mitt，创建一个文件叫event.js
文件内容如下：

import mitt from 'mitt'

const emitter = mitt();

export default emitter

3，在组件1和组件2分别引入 emitter

import emitter from '你创建event的地址'

4，vue3中的函数可以直接写在setup内部，所以组件2写法如下

export default{
...
setup(){
emitter.on('edit',()=>{})
return{}
}

这里监听的方法
5，触发

export default{
...
setup(){
emitter.emit('edit','我是想要传的值')
return{}
}

这样就借用插件实现了vue3的全局事件总线

最后

以上就是文艺枫叶为你收集整理的vue2和vue3的全局事件总线的全部内容，希望文章能够帮你解决vue2和vue3的全局事件总线所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。