vue通过BroadcastChannel实现不同标签页直接传递消息

crossTagMsg.js

复制代码
const channel = new BroadcastChannel('demo');

export function sendMsg(type, content){
    channel.postMessage({
        type,
        content,
    });
}

export function listenMsg(callback){
    const handler = (e) => {
        callback && callback(e.data);
    }
    channel.addEventListener('message', handler);
    return() => {
        channel.removeEventListener('message', handler);
    };
}

A.vue发送消息页面

复制代码
import {listenMsg} from '@/utils/crossTagMsg'

function update(){
	sendMsg("更新", "dddd")
}

B.vue监听消息页面

复制代码
import {listenMsg} from '@/utils/crossTagMsg'

//监听消息
const cancelListen = listenMsg((msgInfo) => {
  console.log('监听到了更新', msgInfo)
})
//组件销毁时移除监听
onBeforeUnmount(cancelListen);
相关推荐
不一样的少年_11 分钟前
【前端效率工具】:告别右键另存,不到 50 行代码一键批量下载网页图片
前端·javascript·浏览器
golang学习记12 分钟前
从0死磕全栈之Next.js 企业级 next.config.js 配置详解:打造高性能、安全、可维护的中大型项目
前端
1024小神14 分钟前
next项目使用状态管理zustand说明
前端
Asort14 分钟前
JavaScript设计模式(八):组合模式(Composite)——构建灵活可扩展的树形对象结构
前端·javascript·设计模式
刘永胜是我16 分钟前
【iTerm2 实用技巧】解决两大顽疾:历史记录看不全 & 鼠标滚轮失灵
前端·iterm
returnfalse18 分钟前
🔥 解密StreamParser:让数据流解析变得如此优雅!
前端
凉城a19 分钟前
经常看到的IPv4、IPv6到底是什么?
前端·后端·tcp/ip
jserTang25 分钟前
Cursor Plan Mode:AI 终于知道先想后做了
前端·后端·cursor
木觞清30 分钟前
喜马拉雅音频链接逆向实战
开发语言·前端·javascript
一枚前端小能手33 分钟前
「周更第6期」实用JS库推荐:InversifyJS
前端·javascript