Vue3 跨页面实现点击事件 -- mitt

注：此处为vue3 setup写法

1.安装

npm i mitt -s

2.引入-- main.js文件中

// main.js
import mitt from 'mitt'

app.config.globalProperties.Bus = mitt()

3.使用

页面A

import { getCurrentInstance } from 'vue'
// 获取到 全局事件总线
const {Bus} = getCurrentInstance().appContext.config.globalProperties 


//直接写在script中，不需要事件包裹 
Bus.on('ClickcaptureImage',()=> {
      console.log('监听Bus')
      captureImage();//事件名
    })

页面B

Bus.emit('ClickcaptureImage', ()=>{

  console.log('唤醒截图事件',123123)
})

常用接口

//触发事件，两个参数：name：触发的方法名，data：需要传递的参数
emit(name,data) 
//绑定事件，两个参数：name：绑定的方法名，callback：触发后执行的回调函数
on(name,callback) 
//指定监听解绑，一个参数：name：需要解绑的方法名
off(name) 
//移除所有事件监听
all.clear()