Vue3.0 $bus全局事件总线的定义方法

在开发过程中经常会遇到不同组建之间相互传值的情况 Vue2.0 中一般都是只用自定义bus 但是到了Vue 3.0 作者似乎更推荐使用 mitt 库 今天就记录下mitt 的用法

1.先记录下第一种用法

• 1.导入外部库

npm install --save mitt

• 在main.js 中引入外部库

// 因为在vue 3.0 中修改了组建默认使用方式 所以这里要稍作修改
import mitt from 'mitt'

const bus = mitt()
const app = createApp(App)

// 再注册全局事件总线
app.config.globalProperties.$bus = bus

app.use(store).use(router).mount('#app')

• 在需要做监听的组建中

//获取当前组建实例 
import { getCurrentInstance } from 'vue'
    
// 在setup函数中获取实例对象并定义bus
const instance = getCurrentInstance()
const bus = instance.appContext.config.globalProperties.$bus

// 在mounted 函数中声明监听对象
onMounted(()=> {
    bus.on('bro',(value)=> {
        console.log('获取其它组建传给我的值' + value)
    })
})

• 在需要响应传值的对象中

// 获取组建实例对象
import { getCurrentInstance } from 'vue'
    
// 在setup函数中获取实例对象并定义bus
const instance = getCurrentInstance()
const bus = instance.appContext.config.globalProperties.$bus

// 在自定义方法中
const fn = ()=> {
    bus.emit('bro','你是个大傻帽吧.....')
}

全局事件总线的第一种方式就是这样了

2. 全局路由总线的更近一层的用法 provide inject

• 同样在main.js 中导入mitt 插件
• 全局注册provide 局部使用 inject

// 在App.vue 中声明
import { getCurrentInstance } from 'vue'
setup() {
    const ins = getCurrentInstance()
    const bus = ins.appContext.config.globalProperties.$bus
    // 把bus 作为一个方法对象为全局组建提供
    provide('bus',bus)
 }
 

• 在需要做监听的组建中 声明

import { inject } from 'vue'
 const bus = inject('bus')
 onMounted(()=> {
     bus.on('bro',(value)=> {
         console.log('兄弟组建给的值' + value)
    })
 })

• 在需要响应事假的组建中

import { inject } from 'vue'

const bus = inject('bus')

const Fn = ()=> {
    bus.emit('bro',"你是大傻帽........")
}

全局定义局部响应的 的注册方法就完成了

• 具体处理全局事件总线使用哪种方式还要结合自己实际逻辑需要 如果大神有更好的方法或更好的封装还请不吝赐教