vue2 中 mitt 的使用方法

在 Vue2 的项目开发中，我们经常会遇到组件之间的通信问题。当父子组件、祖孙组件之间的通信方式无法满足需求时，事件总线或 Vuex 等工具就派上用场了。而 mitt 作为一个轻量级的事件总线库，在 Vue2 项目里使用起来十分便捷高效。

需要安装 mitt。在项目的根目录下，通过 npm 或者 yarn 进行安装。使用 npm 时，在命令行输入“npm install mitt --save”；若是使用 yarn，则输入“yarn add mitt”。安装完成后，就可以在项目中引入使用了。

在 Vue2 项目里使用 mitt，一般会先创建一个 mitt 实例。在项目的 src 目录下新建一个 mitt.js 文件，代码如下：

import mitt from 'mitt'
const emitter = mitt()
export default emitter

这样，一个 mitt 实例就创建好了，接下来在组件中就可以使用这个实例来进行事件的发布和监听。

在需要发布事件的组件中，引入刚才创建的 emitter 实例。例如在一个按钮点击事件中发布事件：

<template>
  <button @click="sendMessage">点击发送消息</button>
</template>

<script>
import emitter from './mitt.js'
export default {
  methods: {
    sendMessage() {
      emitter.emit('message', '这是发送的消息')
    }
  }
}
</script>

这里通过 emitter.emit 方法触发了一个名为“message”的事件，并传递了一个字符串作为参数。

而在需要监听事件的组件中，同样引入 emitter 实例，并在 created 钩子函数中进行事件的监听：

<template>
  <div></div>
</template>

<script>
import emitter from './mitt.js'
export default {
  created() {
    emitter.on('message', (data) => {
      console.log(data)
    })
  }
}
</script>

在这个组件的 created 钩子函数中，通过 emitter.on 方法监听了名为“message”的事件，并在回调函数中处理接收到的数据。

mitt 还支持取消事件监听。比如在组件销毁时，需要取消监听，防止内存泄漏：

<template>
  <div></div>
</template>

<script>
import emitter from './mitt.js'
export default {
  created() {
    this.fn = (data) => {
      console.log(data)
    }
    emitter.on('message', this.fn)
  },
  destroyed() {
    emitter.off('message', this.fn)
  }
}
</script>

通过以上步骤，我们就能在 Vue2 项目中灵活运用 mitt 进行组件间的通信，让项目的架构更加清晰，代码更加易于维护。