一，安裝mitt庫：

liuhongdi@lhdpc:/data/vue/storeweb$ npm install -S mitt

liuhongdi@lhdpc:/data/vue/storeweb$ npm list mitt
storeweb@0.1.0 /data/vue/storeweb
├─┬ element-plus@1.1.0-beta.7
│ └── mitt@2.1.0
└── mitt@3.0.0

說明：劉巨集締的架構森林是一個專注架構的部落格，地址：https://www.cnblogs.com/architectforest

對應的原始碼可以訪問這裡獲取：

說明：作者:劉巨集締 郵箱: [email protected]

二，js程式碼

import mitt from 'mitt'
const VueEvent = mitt();
export default VueEvent;

import VueEvent from '../event/event’

…

//傳送訊息給navbar,修改navbar的背景色和logo
VueEvent.emit("navbarSetting",res.data.setting);

import VueEvent from '@/event/event’

setup () {
    const logoSrc = ref("");
    logoSrc.value = sessionStorage.getItem('logoSrc');
    onMounted(()=>{
          VueEvent.on("navbarSetting", data => {
       //alert('navbarSetting');
       var setting = data;
       //設定 navbar的背景色
 

         document.body.style.setProperty('--navbar-background', setting.navBarColor);
         sessionStorage.setItem('logoSrc',setting.logoImageUrl);
         logoSrc.value = setting.logoImageUrl;
       });
    });
 
     return {
         logoSrc,
     }
  },

三，測試效果

四，檢視vue.js的版本:

liuhongdi@lhdpc:/data/vue/storeweb$ npm list vue
storeweb@0.1.0 /data/vue/storeweb
├─┬ @vue/cli-plugin-babel@4.5.13
│ └─┬ @vue/babel-preset-app@4.5.13
│   └── vue@3.2.6 deduped
├─┬ element-plus@1.1.0-beta.7
│ └── vue@3.2.6 deduped
├─┬ vue-router@4.0.11
│ └── vue@3.2.6 deduped
├── vue@3.2.6
└─┬ vue3-carousel@0.1.27
  └── vue@3.2.6 deduped