Vue3：mitt快速上手

mitt 是一个用于创建事件处理器的库，它可以帮助你在Vue 3项目中更好地管理事件。

首先，你需要安装 mitt：

npm install mitt

然后，你可以在你的Vue 3项目中这样使用 mitt：

// 在 Vue 组件中
<template>
  <button @click="emitEvent">Emit Event</button>
</template>
 
<script>
import { defineComponent } from 'vue';
import { all } from 'mitt';
 
export default defineComponent({
  setup() {
    // 使用 mitt 创建事件总线
    const emitter = all();
 
    // 监听事件
    emitter.on('myEvent', (data) => {
      console.log('Event data:', data);
    });
 
    // 触发事件
    function emitEvent() {
      emitter.emit('myEvent', { message: 'Hello, mitt!' });
    }
 
    return { emitEvent };
  },
});
</script>

在上面的例子中，我们创建了一个名为 emitter 的事件总线，并使用 all() 函数来获取它。然后，我们用 on() 方法来监听一个名为 myEvent 的事件，并在触发时执行一个回调函数。我们还定义了一个方法 emitEvent，当按钮被点击时，它会触发 myEvent 事件，并传递一些数据。