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的全局事件总线

Logo

前往低代码交流专区

更多推荐