今天在開發專案時遇到在一個元件中操作完之後 需要其他元件的資料重新整理

通俗的講就是非父子元件之間的通訊

其原理通過其中建立新的vue物件作為中介軟體來達到通訊的目的

具體操作是這樣的：

1、建立一個新的global.js檔案 來初始化這個global Vue物件

import Vue from 'vue'
export const global = new Vue()

2、在呼叫方元件使用方法

import { global } from '@/utils/global'
global.$emit('getUndoList') 

// getUndoList 為這個事件的key值 可設定為任意值

3、在被呼叫方使用方法

在引入完js之後 在created或者mounted 方法中寫入 監聽事件

global.$on('getUndoList', () => {
  //元件其他方法
})

　這樣就可以了

在使用完這個發現只能在一個頁面中有效 無法監聽到其他標籤頁的具體操作

然後我就百度vue 監聽其他標籤頁的方法

參考：https://blog.csdn.net/weixin_34167819/article/details/91369193

其中有說到 使用localStorage 儲存到瀏覽器臨時變數中的方法

但是這並不能監聽到其他標籤頁的事件

無意間看到這篇文章https://blog.csdn.net/ju__ju/article/details/101263914

使用localStorage + 計時器來監聽事件

於是有了想法

在頁面開始時啟動監聽器監聽localStorage的值

新標籤頁在提交時 設定localStorage的值為true

此時監聽器監聽到localStorage變化 並設定為false 監聽結束

這樣操作能保證只在需要的時候使用計時器 保證資源不浪費

到此 vue 單頁面通訊 和多標籤頁通訊都順利解決

完結撒花