Mitt是一个体积极小的第三方消息发布/订阅式JavaScript库

Mitt是一个体积极小的第三方消息发布/订阅式JavaScript库

官方文档是与框架无关的，所以这个玩意其实React、Vue都可以用

本文以Vue3为例，介绍Mitt库的导入和使用

在项目的根目录下执行：

$ npm i mitt --save

在 src/下新建一个 bus.js文件，内容如下：

/* bus.js */

import mitt from "mitt";

const bus = {}
const emitter = mitt()

bus.$on = emitter.on
bus.$off = emitter.off
bus.$emit = emitter.emit

export default bus

打开 src/main.js内容如下：

/* main.js */

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

改造后的 main.js：

/* main.js */

import { createApp } from 'vue'
import App from './App.vue'
import bus from './bus'

const app = createApp(App)

app.config.globalProperties.$bus = bus

app.mount('#app')

使用

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  setup() {
    const links = reactive([
      {link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel', text: 'babel'},
      {link: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint', text: 'eslint'}
    ])
    const add = () => links.push({
      link: 'https://github.com/developit/mitt',
      text: 'mitt'
    })
    return {links, add}
  },
  mounted() {
    this.$bus.$on("click", this.add);
  },
};