useBroadcastChannel

类别

Browser

导出大小

907 B

最近修改

2 days ago

响应式 BroadcastChannel API。

🌐 Reactive BroadcastChannel API.

自动关闭已卸载组件的广播通道。

🌐 Closes a broadcast channel automatically component unmounted.

示例

源代码在线运行

Supported: false

Please open this page in at least two tabs

Aww, snap! The Broadcast Channel Web API is not supported in your browser.

用法

🌐 Usage

BroadcastChannel 接口表示一个命名通道，给定来源的任何浏览上下文都可以订阅它。它允许同一来源的不同文档（在不同的窗口、标签页、框架或 iframe 中）之间进行通信。

🌐 The BroadcastChannel interface represents a named channel that any browsing context of a given origin can subscribe to. It allows communication between different documents (in different windows, tabs, frames, or iframes) of the same origin.

消息通过在所有监听该通道的 BroadcastChannel 对象上触发的消息事件进行广播。

🌐 Messages are broadcasted via a message event fired at all BroadcastChannel objects listening to the channel.

import { useBroadcastChannel } from '@vueuse/core'
import { shallowRef } from 'vue'

const {
  isSupported,
  channel,
  post,
  close,
  error,
  isClosed,
} = useBroadcastChannel({ name: 'vueuse-demo-channel' })

const message = shallowRef('')

message.value = 'Hello, VueUse World!'

// Post the message to the broadcast channel:
post(message.value)

// Option to close the channel if you wish:
close()