需求：

元件A為公共元件，負責定時查詢資訊通知，並通過模態展示；
元件B為業務元件，負責專案中報告的編輯稽核等業務流程；
使用者開啟元件A中的資訊通知模態時，可以選擇接受或拒絕處理相關通知，接受時直接開啟元件B進行業務，拒絕時只重新整理通知不進行其他操作。這就需要監聽元件A中的事件，當用戶開啟通知模態點選接受時，獲取元件A中所選擇使用者的id並觸發元件B中的方法。

圖示：

1.紅框中為選單元件A中的訊息通知，其它部分為元件B

2.點選訊息通知時的操作模態

解決辦法：

由於兩個元件間不存在父子關係，且業務中已經使用到vuex，因此，決定採用vuex作為中介。一開始設想使用者點選元件A中的通知時，通知引數noticeId通過vuex在元件間進行傳遞，在元件B中通過watch監聽noticeId變化來呼叫元件中的事件。後來考慮到當用戶點選同一通知時傳遞的引數一致，會導致元件B中的watch無法監聽到變化進而無法呼叫事件，因此在vuex中增加布爾值用於改變狀態，通過監聽變化的布林值來獲取noticeId。
1.vuex

state: {
    noticeId:'',// 儲存元件A中通知使用者的ID
    isNotice:false,// 用於修改監聽狀態，避免點選同一id時元件B中的watch失效
  },
  mutations: {
    GET_NOTICEID:(state,data) => {
      state.isNotice = !state.isNotice;// 每次呼叫時更新狀態
      state.noticeId = data;
    }
  }

2.元件A中的主業務：

// 接受按鈕，id為通知中的對應使用者id
define(id) {
		// 判斷是否勾選立即書寫
        if(this.isWrite) {
        	// 判斷路由，處於元件B中時通過commit提交引數到vuex中,'work/radiation'為元件B的路由
          if(this.$route.path.indexOf('work/radiation') !== -1) {
            this.$store.commit('GET_NOTICEID',id);
          } else {
            //  處於其他元件時攜帶引數跳轉到元件B頁面
            this.$router.push('/work/radiation?id=' + id);
          }
        } else {
         	//僅呼叫接受介面並重新整理資料...
        }
      },
 

3.元件B中業務：

// 獲取vuex中的isNotice布林值，用於監聽。注：isNotice每次呼叫都會改變，見1.
computed: {
      isNotice() {
        return this.$store.state.user.isNotice
      }
    },
watch:{
      isNotice(val,oldVal) {
        console.log(this.$store.getters.noticeId)；// 通過vuex傳遞來的元件A中的引數
        // 觸發元件B中的事件...
      }
    }