要在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
- 完结