vue3 使用BroadcastChannel跨窗口或跨标签页通信
·
在工作中有跨窗口的需求,就大概了解了一下
在 Vue 3 中使用 BroadcastChannel API 进行跨窗口或跨标签页通信是一种非常实用的方法。BroadcastChannel 允许不同窗口或标签页中的 JavaScript 实例进行通信,即使这些窗口或标签页属于不同的文档
下面是一个简单的示例来展示如何在 Vue 3 应用中使用 BroadcastChannel 进行跨页面通信:
第一步:创建 BroadcastChannel 实例
首先,在每个需要通信的窗口或标签页中创建一个 BroadcastChannel 实例。通常情况下,你会使用相同的名称来创建这些实例,以确保它们可以互相通信。
const channel = new BroadcastChannel('my-channel');
第二步:发送消息
你可以通过调用 channel.postMessage() 方法来发送消息。
// 发送消息
channel.postMessage({ type: 'CUSTOM_EVENT', data: 'Hello from window A' });
第三步:监听消息
// 监听消息
channel.onmessage = function (event) {
console.log('Received message:', event.data);
};
在组件离开的时候销毁
onUnmounted(() => {
// 组件卸载时移除监听器并关闭 BroadcastChannel
channel.onmessage = null;
channel.close();
});
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)