【Vue3】如何使用全局事件总线

当大家学完vue时，应该就会有一个疑问了，setup中的onMounted没有this，而以配置项的形式现在与setup平级时又显得不太优雅，但又想使用全局事件总线，所以就会了解到一个相当于vue2的Vue.Property的一个配置项叫做app.config.globalProperties，但是当我们往其身上挂载this或createApp({})时又会发现，其身上很干净，没有 $ on,他的 $emit也发生了改变无法使用，那么我们可以使用第三方库mitt，官方推荐方法：

安装mitt

npm install --save mitt

新建文件 eventBus.js

import mitt from 'mitt';
 
export default mitt();
 

使用

// A组件
import $bus from './eventBus.js';
setup(){
  onMounted(() => {
      $bus.on('getMessage',(val)=>{
        console.log('接收到消息',val)
      })
    })
}

// B组件
import $bus from '../eventBus.js';
function postMessage(){
    $bus.emit('getMessage','我是子组件')
   }