pnpm install mitt
There are 4 main mittsAPI：emit(Trigger an event),on(Binding Event),off(Unbinding an event),all(Get all bound events)
Steps to use:
(1) Lieutenant General mitt global registration
(2) emit transmit event (transmit signal) in component A
(3) Listen to events in component B
(4) Remove the monitor
PassedRegister the mitt instance as a global property. Any component in the entire application can easily access and use the event bus without the need to be introduced separately.
//
import { createApp } from 'vue';
import App from './';
import mitt from 'mitt';
const app = createApp(App);
// Mount the mitt instance to the global properties.$bus = mitt();
('#app');Brief version writing
<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); //Show/Hide logconst { proxy } = getCurrentInstance(); //In setup, you can obtain global attributes through proxyproxy.$('show-task-log', data => { = true;}); // Listen to the 'show-task-log' event, and execute()=>{ = true;}</script>
<!--
This solution is not used onUnmounted To manage the life cycle of event listeners，Potential memory leak problem。Register to global variables，Will not be destroyed because of component destruction，Memory not freed。
If you do not need to remove the event listener when the component is uninstalled，Or you make sure that the life cycle of the event listener is consistent with the life cycle of the component，This simplification method is OK。
-->Recommended useonMountedandonUnmounted, this ensures that there is no memory leak when the component is uninstalled.
Recommended writing
<!---->
<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.$('show-task-log', ()=> { = true;});});
onUnmounted(() => { proxy.$('show-task-log');}); // Without specifying which callback function to remove, all callback functions that listen to the binding of show-task-log are removed.</script>If multiple callback functions listen to the same event, and onUmounted only wants to remove specific callback functions, you need to write this:
const handleShowTaskLog = () => {
('handleShowTaskLog called');
};
const anotherHandler = () => {
('anotherHandler called');
};
onMounted(() => {
proxy.$('show-task-log', handleShowTaskLog);
proxy.$('show-task-log', anotherHandler);
});
onUnmounted(() => {
proxy.$('show-task-log', handleShowTaskLog);
// This ensures that only handleShowTaskLog is removed and anotherHandler will still be triggered});emission
<template>
<button @click="triggerAsyncFunction">Show Task Log</button>
</template>
<script setup>
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const triggerAsyncFunction = async () => {
// Notify other components of the launch event proxy.$('show-task-log');
// Simulate an asynchronous function await new Promise(resolve => setTimeout(resolve, 1000));
};
</script>This is the article about Vue3 mitt-implemented communication between any component in Vue3. This is the end of this article. For more information about Vue3 mitt-implemented communication content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!