【Vue3】Mitt

在 Vue3 中，$on，$off 和 $once 实例方法被移除，EventBus 无法使用了。那么此时，我们可以使用 Mitt 库（发布订阅模式的设计）。

// 安装 mitt
npm install mitt -S
1
2

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'
const app = createApp(App)
const Mit = mitt()
declare module 'vue' {
    export interface ComponentCustomProperties {
      $Bus: typeof Mit
    }
}
app.config.globalProperties.$Bus = Mit
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13

<template>
  <div>
    <A>A>
    <B>B>
  div>
template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import A from './components/A.vue';
import B from './components/B.vue';
script>

<style scoped lang="less">

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<template>
  <div>
    <h1>我是A组件
    h1>
    <button @click="emit">emitbutton>
    <hr>
  div>
template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance();
const emit = () => {
instance?.proxy?.$Bus.emit('a', '我是A组件')
  instance?.proxy?.$Bus.emit('a1', '我是A1组件')
}
script>

<style scoped>style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<template>
  <div>
    <h1>我是B组件h1>
  div>
template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
instance?.proxy?.$Bus.on('a', (str) => {
  console.log(str, '===> B 组件');
})
// '*' 代表监听所有事件触发
instance?.proxy?.$Bus.on('*', (type, str) => {
  console.log(type, str, '===> B 组件');
})
script>

<style scoped>style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

还有一些其他方法：

<template>
  <div>
    <h1>我是B组件h1>
  div>
template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
const Bus = (str: any) => {
  console.log(str, '===> B 组件');
}
instance?.proxy?.$Bus.on('a', Bus)
instance?.proxy?.$Bus.off('a', Bus) // 删除该事件
instance?.proxy?.$Bus.all.clear() // 删除所有事件
script>

<style scoped>style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19