Vue3 组件间通信之mitt实现任意组件间通信的步骤

pnpm install mitt

//main.js
import { createApp } from 'vue';
import App from './App.vue';
import mitt from 'mitt';
const app = createApp(App);
// 将 mitt 实例挂载到全局属性
app.config.globalProperties.$bus = mitt();
app.mount('#app');

<template>
  <div>
    <div v-if="showTaskLog">Task Log is shown</div>
    <ChildComponent />
  </div>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue';
const showTaskLog = ref(false);            //显示/隐藏日志
const { proxy } = getCurrentInstance();    //setup 中可以通过 proxy 获取全局属性
proxy.$bus.on('show-task-log', data => { showTaskLog.value = true;});    //监听'show-task-log' 事件， 发生show-task-log事件就执行()=>{ showTaskLog.value = true;}
</script>
<!--
此方案没有使用 onUnmounted 来管理事件监听器的生命周期，潜在的内存泄漏问题。注册到全局变量，不会因为组件销毁而销毁，内存没有得到释放。
如果在组件卸载时你不需要移除事件监听器，或者你确定事件监听器的生命周期与组件的生命周期一致，这种简化方式是可以的。
-->

<!--App.vue-->
<template>
  <div>
    <div v-if="showTaskLog">Task Log is shown</div>
    <ChildComponent />
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, getCurrentInstance } from 'vue';
const showTaskLog = ref(false);
const { proxy } = getCurrentInstance();
onMounted(() => { proxy.$bus.on('show-task-log', ()=> {showTaskLog.value = true;});});
onUnmounted(() => { proxy.$bus.off('show-task-log');}); // 不指定移除哪个回调函数，就移除监听show-task-log的绑定的所有回调函数。
</script>

const handleShowTaskLog = () => {
  console.log('handleShowTaskLog called');
};
const anotherHandler = () => {
  console.log('anotherHandler called');
};
onMounted(() => {
  proxy.$bus.on('show-task-log', handleShowTaskLog);
  proxy.$bus.on('show-task-log', anotherHandler);
});
onUnmounted(() => {
  proxy.$bus.off('show-task-log', handleShowTaskLog);
  // 这样可以确保 only handleShowTaskLog 被移除，而 anotherHandler 仍然会被触发
});

<template>
  <button @click="triggerAsyncFunction">Show Task Log</button>
</template>
<script setup>
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const triggerAsyncFunction = async () => {
  // 发射事件通知其他组件
  proxy.$bus.emit('show-task-log');
  // 模拟一个异步函数
  await new Promise(resolve => setTimeout(resolve, 1000));
};
</script>