在工作中有跨窗口的需求,就大概了解了一下
在 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();
});