mitt——vue3的组件间通讯，全局事件总线应用

• Vue2使用EventBus进行组件通信，而Vue3推荐使用mitt.js。

mitt.js的优势

1. Microscopic：压缩后的重量小于200字节。
2. Useful：通配符 "*" 事件类型监听所有事件。
3. Familiar：与Node的EventEmitter相同的名称和想法。
4. Functional：函数式:方法不依赖于 this。
5. Great Name: 伟大的名字:不知为什么mitt没有被使用过。 Mitt是为浏览器设计的，但可以在任何JavaScript运行时中运行。它没有依赖并支持IE9。

npm install --save mitt

使用方法

在main.ts中注册挂载到全局

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'
import router from "./router";
 
const app = createApp(App)
 
// vue3挂载到全局
	// 声明一个类型 避免使用mitt时报类型错误
    type Events = {
      [propName: string]: any
    }
    const eventBus: Emitter<Events> = mitt()

    app.config.globalProperties.$mitt = mitt()
 
app.use(router).mount('#app')

在组件中使用emit 发送信息

<template>

  <div class="w-full flex transition-colors h-screen overflow-auto" ref="el" @scroll="handleScroll">

    <div class="w-full flex h-fit min-h-screen flex-col items-center">

      <!--- Navbar 导航栏  -->

      <Navbar />

      <!-- 面包屑 -->

      <div class="w-full max-w-screen-xl mx-auto py-3">

        <Breadcrumbs />

      </div>

      <div class="m-auto flex w-full flex-1 px-5 border-t">

        <!-- 页面内容 -->

        <div class="mx-auto flex w-full max-w-screen-xl h-fit flex-1 overflow-auto">

          <Content></Content>

        </div>

      </div>

      <!-- 页脚 -->

      <Footer></Footer>

    </div>

  </div>

</template>

<script lang="ts" setup>

import { UseScrollReturn } from '@vueuse/core'

  

const $mitt = getCurrentInstance()?.appContext.config.globalProperties.$mitt

const el = ref<HTMLElement | null>(null)

const layoutScroll: UseScrollReturn = useScroll(el)

  

function handleScroll(e: any) {

  // 滚动条位置发生变化时触发

  $mitt.emit('layout-scroll', layoutScroll.y.value)

}

</script>

在另一个组件中监听on和取消订阅

const isFixed = ref(false)
onMounted(() => {
  // 当前页面已加载
  // 监听 滚动
  $mitt.on('layout-scroll', (y: number) => {
    // 根据滚动条y轴的值改变 isFixed的值
    if (y > 200) {
      isFixed.value = true
    } else {
      isFixed.value = false
    }
  })
})
// 离开页面时 取消订阅
onUnmounted(() => {
  $mitt.off('layout-scroll')
})