[JavaScript知识库]Vue3优雅的使用事件总线

要在Vue 3 Composition API中使用事件总线，
请在main.js中使用Vue 3的新provideAPI，然后在任何组件中使用inject

• 安装mitt

yarn add mitt

• Provide

// main.js
import { createApp } from "vue";
import App from "./App.vue";
// 引入mitt
import mitt from 'mitt';

// 初始化事件总线
const emitter = mitt();

const app = createApp(App)
// 注册事件总线
app.provide('emitter', emitter);

app.mount('#app');

• Inject （注册事件）

// 监听事件
import { inject } from 'vue'

export default {
 setup() {
    const emitter = inject("emitter");
    
     // 注册事件
    emitter.on("hello", (value) => {
      console.log(`App接收到的数据为：${value}`);
    });
  },
}

• Inject (触发事件)

import { inject } from 'vue'

export default {
  setup() {
    const emitter = inject("emitter");

    function show() {
      // 触发事件
      emitter.emit("hello", "hello js");
    }

    return {
      show,
    };
  },
};

• Console

App接收到的数据为：hello js

• 完结