vue3-全局事件的使用

前言

对于全局事件总线，它是一种组件间通信的方式，可以让任意组件进行通信

它就相当于一个中间介质可以让组件通信，可以理解为他就是一个上帝，不参与组件，只负责通信

如下图

安装

vue3推荐使用mitt

安装mitt

npm install mitt

mitt引入

全局引入

在main.js文件

import mitt from "mitt"
const app = createApp(App)
const bus = mitt()
app.config.globalProperties.$bus = bus

在组件内使用

 import { getCurrentInstance } from 'vue'
 const cxt  = getCurrentInstance() //相当于Vue2中的this
    const bus = cxt.appContext.config.globalProperties.$bus
    const emitMitt = function(){
        bus.emit('printMessage','我被触发了')   //触发其他组件监听的名为printMessage的事件
    }

局部引入（推荐）

在src目录内定义一个js文件（在这里是bus.js）

在bus.js文件中

import mitt from 'mitt'
export const events = mitt()

在使用的组件内

import {events} from '../../bus.js'  //引入bus.js文件

//在setup中
let clikmenu=(e)=>{
  events.emit("clikmenu",e)  //可以直接使用
}

主要使用的三种方法

分别是emit，on，off

//三种方法的主要结构分别是
emit(name,data)  // 触发相应事件  name:触发事件的名字   data:传递过去的参数
on(name,callback)  //绑定相应的事件等待emit的触发   name:触发事件的名字   callback:出发后执行回调函数
off(name) //解绑相应事件   name:需要解绑的事件名

注意：必须保证先绑定事件再触发事件

以下示例

在layout组件中

import {events} from '../../bus.js' 

//在setup中
onMounted(()=>{
events.on("clikmenu",(e)=>{
console.log(e)
})
})


onBeforeUnmount(()=>{
        events.off('clikmenu')
    })

在aside.vue组件中

 <el-menu-item @click="clikm(item)"  v-else :key="index + item.id" :index="item.id">
 
import {events} from '../../bus.js'
//setup中
let clikm=(e)=>{
  events.emit("clikmenu",e)
}

当在aside.vue组件执行点击函数clikm就会触发layout.vue中的onMounted中绑定好的事件的回调函数