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);
相关推荐
却尘几秒前
Vite 炸裂快,Webpack 稳如山,Turbopack 想两头要:谁才是下一个王?
前端·面试·vite
北辰alk6 分钟前
React 多组件状态管理:从组件状态到全局状态管理全面指南
前端
一个很帅的帅哥8 分钟前
伪类选择器和伪元素选择器
javascript
葡萄城技术团队17 分钟前
SpreadJS ReportSheet 与 DataManager 实现 Token 鉴权:全流程详解与代码解析
前端
勤劳打代码17 分钟前
触类旁通 —— Flutter 与 React 对比解析
前端·flutter·react native
Glommer17 分钟前
某红书 Js 逆向思路
javascript·逆向
Mintopia17 分钟前
🧠 可解释性AIGC:Web场景下模型决策透明化的技术路径
前端·javascript·aigc
Mintopia20 分钟前
⚙️ Next.js 事务与批量操作:让异步的世界井然有序
前端·javascript·全栈
若梦plus23 分钟前
多端开发之React-Native原理浅析
前端·react native
新兵蛋子025 分钟前
基于 vue3 完成领域模型架构建设
前端