useBroadcastChannel

リアクティブな BroadcastChannel API。

コンポーネントがアンマウントされると自動的にブロードキャストチャネルを閉じます。

使用法

BroadcastChannel インターフェースは、特定のオリジンの任意のブラウジングコンテキストが購読できる名前付きチャネルを表します。同じオリジンの異なるドキュメント（異なるウィンドウ、タブ、フレーム、または iframe）間での通信を可能にします。

メッセージは、チャネルをリッスンしているすべての BroadcastChannel オブジェクトで発生するメッセージイベントを介してブロードキャストされます。

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(message.value)

// 必要に応じてチャネルを閉じるオプション:
close()