快捷導(dǎo)航

Vue3 組件間通信之mitt實(shí)現(xiàn)任意組件間通信的步驟

更新時(shí)間：2024年05月20日 11:51:08 作者：bigcarp

mitt 主要有4個(gè)API：emit（觸發(fā)某個(gè)事件）、on（綁定事件）、off（解綁某個(gè)事件）、all（獲取所有綁定的事件）,這篇文章主要介紹了Vue3 組件間通信之mitt實(shí)現(xiàn)任意組件間通信,需要的朋友可以參考下

pnpm install mitt

mitt 主要有4個(gè)API：emit（觸發(fā)某個(gè)事件）、on（綁定事件）、off（解綁某個(gè)事件）、all（獲取所有綁定的事件）

使用步驟：

（1）main.js中將mitt全局注冊(cè)

（2）在A組件中emit 發(fā)射事件(發(fā)射信號(hào))

（3）在B組件中監(jiān)聽事件

（4）移除監(jiān)聽

main.js 中通過(guò) app.config.globalProperties 將 mitt 實(shí)例注冊(cè)為全局屬性。整個(gè)應(yīng)用中的任何組件都可以方便地訪問(wèn)和使用事件總線，無(wú)需單獨(dú)引入。

//main.js
import { createApp } from 'vue';
import App from './App.vue';
import mitt from 'mitt';
const app = createApp(App);
// 將 mitt 實(shí)例掛載到全局屬性
app.config.globalProperties.$bus = mitt();
app.mount('#app');

App.vue 簡(jiǎn)版寫法

<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 中可以通過(guò) proxy 獲取全局屬性
proxy.$bus.on('show-task-log', data => { showTaskLog.value = true;});    //監(jiān)聽'show-task-log' 事件， 發(fā)生show-task-log事件就執(zhí)行()=>{ showTaskLog.value = true;}
</script>
<!--
此方案沒(méi)有使用 onUnmounted 來(lái)管理事件監(jiān)聽器的生命周期，潛在的內(nèi)存泄漏問(wèn)題。注冊(cè)到全局變量，不會(huì)因?yàn)榻M件銷毀而銷毀，內(nèi)存沒(méi)有得到釋放。
如果在組件卸載時(shí)你不需要移除事件監(jiān)聽器，或者你確定事件監(jiān)聽器的生命周期與組件的生命周期一致，這種簡(jiǎn)化方式是可以的。
-->

推薦使用 onMounted 和 onUnmounted ，這樣可以確保組件卸載時(shí)不會(huì)出現(xiàn)內(nèi)存泄漏。

App.vue 推薦寫法

<!--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');}); // 不指定移除哪個(gè)回調(diào)函數(shù)，就移除監(jiān)聽show-task-log的綁定的所有回調(diào)函數(shù)。
</script>

如果多個(gè)回調(diào)函數(shù)監(jiān)聽同一個(gè)事件，而onUmounted時(shí)只想移除特定的回調(diào)函數(shù)則需要這樣寫：

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 仍然會(huì)被觸發(fā)
});

發(fā)射

<template>
  <button @click="triggerAsyncFunction">Show Task Log</button>
</template>
<script setup>
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const triggerAsyncFunction = async () => {
  // 發(fā)射事件通知其他組件
  proxy.$bus.emit('show-task-log');
  // 模擬一個(gè)異步函數(shù)
  await new Promise(resolve => setTimeout(resolve, 1000));
};
</script>

到此這篇關(guān)于Vue3 組件間通信之mitt實(shí)現(xiàn)任意組件間通信的文章就介紹到這了,更多相關(guān)Vue3 mitt任意組件通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: