快捷導航

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

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

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

pnpm install mitt

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

使用步驟：

（1）main.js中將mitt全局注冊

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

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

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

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

//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');

App.vue 簡版寫法

<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;});    //監(jiān)聽'show-task-log' 事件， 發(fā)生show-task-log事件就執(zhí)行()=>{ showTaskLog.value = true;}
</script>
<!--
此方案沒有使用 onUnmounted 來管理事件監(jiān)聽器的生命周期，潛在的內(nèi)存泄漏問題。注冊到全局變量，不會因為組件銷毀而銷毀，內(nèi)存沒有得到釋放。
如果在組件卸載時你不需要移除事件監(jiān)聽器，或者你確定事件監(jiān)聽器的生命周期與組件的生命周期一致，這種簡化方式是可以的。
-->

推薦使用 onMounted 和 onUnmounted ，這樣可以確保組件卸載時不會出現(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');}); // 不指定移除哪個回調(diào)函數(shù)，就移除監(jiān)聽show-task-log的綁定的所有回調(diào)函數(shù)。
</script>

如果多個回調(diào)函數(shù)監(jiān)聽同一個事件，而onUmounted時只想移除特定的回調(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 仍然會被觸發(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');
  // 模擬一個異步函數(shù)
  await new Promise(resolve => setTimeout(resolve, 1000));
};
</script>

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

您可能感興趣的文章: