useBroadcastChannel

类别

浏览器

导出大小

510 B

演示

源

支持: false

请在至少两个标签页中打开此页面

哎呀！您的浏览器不支持 Broadcast Channel Web API。

用法

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

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

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

类型声明

typescript

export interface UseBroadcastChannelOptions extends ConfigurableWindow {
  /**
   * The name of the channel.
   */
  name: string
}
/**
 * Reactive BroadcastChannel
 *
 * @see https://vueuse.org.cn/useBroadcastChannel
 * @see https://mdn.org.cn/en-US/docs/Web/API/BroadcastChannel
 * @param options
 *
 */
export declare function useBroadcastChannel<D, P>(
  options: UseBroadcastChannelOptions,
): UseBroadcastChannelReturn<D, P>
export interface UseBroadcastChannelReturn<D, P> {
  isSupported: ComputedRef<boolean>
  channel: Ref<BroadcastChannel | undefined>
  data: Ref<D>
  post: (data: P) => void
  close: () => void
  error: ShallowRef<Event | null>
  isClosed: ShallowRef<boolean>
}