vue爬坑之路——監聽當前頁面及新標簽頁面的事件方法

今天在開發項目時遇到在一個組件中操作完之后 需要其他組件的數據刷新

通俗的講就是非父子組件之間的通信

其原理通過其中建立新的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 單頁面通信 和多標簽頁通信都順利解決

完結撒花