Vue中跨標簽通信詳解

更新時間：2024年01月05日 08:19:20 作者：好大貓

這篇文章主要為大家詳細介紹了介紹了Vue中跨標簽通信的相關知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

前言

最近看到別人的后臺管理系統(tǒng) 做了這樣一個功能:

當在列表頁時，點擊列表對應的修改按鈕，瀏覽器打開一個新的 tab 頁
在新的 tab 頁上是一個詳情頁，當修改里面的詳情數(shù)據(jù)后，點擊提交
列表頁當發(fā)現(xiàn)詳情頁面提交后，會重新請求數(shù)據(jù)

感覺這個功能很有趣，找了幾個比較好的方案，做一個記錄

storage

storage 可以跨頁面觸發(fā)事件,下面是 MDN 關于 storageEvent 的介紹

所以我們可以根據(jù) storage 的這個特性來做

我們使用一個按鈕模擬 列表頁面的修改按鈕

點擊這個按鈕,跳轉到詳情頁面

使用 window.open 可以打開一個新的 tab，使用 vue-router 只能在頁面內跳轉

 doClick() {
    window.open("http://localhost:8080/detail", "_blank")
 }

在 mounted 中編寫監(jiān)聽函數(shù)

 window.addEventListener('storage', function (event) {
     if (event.key === 'shareData') {
       const newData = event.newValue;
       console.log('收到的更新數(shù)據(jù)：', newData);
     }
 });

在詳情頁面，我們使用 input 表示詳情 form, 一個按鈕表示提交

在修改中只需使用 storage 保存輸入框里面的值即可(輸入框已經使用v-model綁定在變量num上)

change() {
  localStorage.setItem('shareData', this.num);
 }

當點擊修改時,可以看到列表中的監(jiān)聽函數(shù)生效

這個 this.num 只是模擬，實際上只要 stoage 不重復即可觸發(fā)監(jiān)聽，等觸發(fā)監(jiān)聽后就可以重新發(fā)起請求

BroadcastChannel

BroadcastChannel是一個專門跨標簽通信的解決辦法

核心在于兩個 tab 使用同一個 BroadcastChannel name,是頻道的唯一標識

新建 BroadcastChannel.js,目的是為了多個 tab 使用同一個BroadcastChannel.name，可以在使用通信結束過后斷開其與對應頻道的關聯(lián)

BroadcastChannel.js

const channelObj = new BroadcastChannel('BroadcastChannel');

export {
  channelObj
}

在列表頁中的 mounted 函數(shù)中監(jiān)聽

import {channelObj} from "./BroadcastChannel"

 channelObj.addEventListener("message", function (event) {
      const newData = event.data;
      console.log('收到的更新數(shù)據(jù)：', newData);
  })

我們在詳情頁面使用 postMessage 發(fā)送消息

import {channelObj} from "./BroadcastChannel"

 change() {
    // 發(fā)送消息
    channelObj.postMessage(this.num);
 }

同樣的也可以收到更新后的數(shù)據(jù)，和 storage 不同的是，this.num 可以為相同的值

visibilitychange(補充：不涉及標簽通信)

類似于小程序中的 onShow 方法,當當前 tab 頁面展示隱藏時會觸發(fā)這個事件，同樣的，在切換 tab 時也可以觸發(fā)這個事件

 window.addEventListener("visibilitychange", () => {
      if(document.visibilityState === "visible"){
        console.log("頁面可見")
      }else{
        console.log("頁面不可見")
      }
 });

在頁面可見時就會調用更新列表，這種方法的缺點是不論是否點擊了詳情提交按鈕都會執(zhí)行，不涉及標簽通信

到此這篇關于Vue中跨標簽通信詳解的文章就介紹到這了,更多相關Vue跨標簽通信內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: