vue3之数据通信插件miit😘

比起 Vue 实例上的 EventBus，mitt.js 好在哪里呢？

1. 首先它足够小，仅有200bytes。
2. 其次支持全部事件的监听和批量移除。
3. 它还不依赖 Vue 实例，可以跨框架使用，React 或者 Vue，甚至 jQuery 项目都能使用同一套库。

项目中安装mitt

npm install mitt@ --g

创建一个mitt文件

import mitt from 'mitt'

const instance = mitt()
const eventBus = {}
eventBus.$on = instance.on
eventBus.$off = instance.off
eventBus.$emit = instance.emit

export default eventBus

挂载在vue实例上

import eventBus from "./tools/Mitt";

const app = createApp(App)

app.config.globalProperties.$mitt = eventBus;

创建一个子组件

<template>
  <div>
    <h4>############################</h4>
    <h3>这是一个子组件</h3>
    <button @click="hai">你个熊孩子</button>
    <h4>############################</h4>
  </div>
</template>

<script setup>
import { getCurrentInstance } from "vue";
const { $mitt } = getCurrentInstance().appContext.config.globalProperties;

const hai = () => {
  console.log($mitt)
  $mitt.$emit('moneyEvent', '子组件传参为2')
}

</script>

<style scoped>

</style>

创建一个父组件

<template>
  <div>
    <h2>这是一个父组件,下面的是一个子组件</h2>
    <Child></Child>
  </div>
</template>
<script setup>
import Child from "./Child";
import {getCurrentInstance ,onMounted} from "vue";

const { $mitt } =  getCurrentInstance().appContext.config.globalProperties;

onMounted(() => {
  console.log($mitt)
  $mitt.$on('moneyEvent', res => {
    console.log(res)
  })
})

</script>

<style scoped>

</style>

测试输出结果如下：