vue 中跨标签通信

前言

最近看到别人的 后台管理系统 做了这样一个功能:

  1. 当在列表页时,点击列表对应的修改按钮,浏览器打开一个新的 tab 页
  2. 在新的 tab 页上是一个详情页,当修改里面的详情数据后,点击提交
  3. 列表页当发现详情页面提交后,会重新请求数据

感觉这个功能很有趣,找了几个比较好的方案,做一个记录

storage

storage 可以跨页面触发事件,下面是 MDN 关于 storageEvent 的介绍

所以我们可以根据 storage 的这个特性来做

我们使用一个按钮模拟 列表页面的修改按钮

点击这个按钮,跳转到 详情页面

使用 window.open 可以打开一个新的 tab,使用 vue-router 只能在页面内跳转

js 复制代码
 doClick() {
    window.open("http://localhost:8080/detail", "_blank")
 }

mounted 中编写监听函数

js 复制代码
 window.addEventListener('storage', function (event) {
     if (event.key === 'shareData') {
       const newData = event.newValue;
       console.log('收到的更新数据:', newData);
     }
 });

在详情页面,我们使用 input 表示详情 form, 一个按钮表示 提交

在修改中只需使用 storage 保存输入框里面的值即可(输入框已经使用v-model绑定在变量num上)

js 复制代码
change() {
  localStorage.setItem('shareData', this.num);
 }  

当点击修改时,可以看到 列表中的监听函数生效

这个 this.num 只是模拟,实际上只要 stoage 不重复即可触发监听,等触发监听后就可以重新发起请求

BroadcastChannel

BroadcastChannel是一个专门跨标签通信的解决办法

核心在于两个 tab 使用同一个 BroadcastChannel 实例

新建 BroadcastChannel.js,目的是为了多个 tab 使用同一个实例

js 复制代码
const channelObj = new BroadcastChannel('BroadcastChannel');

export {
  channelObj
}

在列表页中的 mounted 函数中监听

js 复制代码
import {channelObj} from "./BroadcastChannel"

 channelObj.addEventListener("message", function (event) {
      const newData = event.data;
      console.log('收到的更新数据:', newData);
  })

我们在详情页面使用 postMessage 发送消息

js 复制代码
import {channelObj} from "./BroadcastChannel"

 change() {
    // 发送消息
    channelObj.postMessage(this.num);
 }

同样的也可以收到更新后的数据,和 storage 不同的是,this.num 可以为相同的值

结尾

今天介绍两种 vue 的跨标签通信,如果有什么其他的好的跨标签通信,会再次更新

相关推荐
fruge1 小时前
2025前端工程化与性能优化实战指南:从构建到监控的全链路方案
前端·性能优化
aesthetician2 小时前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
知识分享小能手5 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng6 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科6 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20166 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
lijun_xiao20098 小时前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔8 小时前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼8 小时前
JavaWeb_p165部门管理
java·开发语言·前端
EndingCoder8 小时前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js