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();
    });