fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
1.7 KiB
1.7 KiB
category
| category |
|---|
| Browser |
useBroadcastChannel
Reactive BroadcastChannel API.
Closes a broadcast channel automatically component unmounted.
Usage
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.
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();
Type Declarations
export interface UseBroadcastChannelOptions extends ConfigurableWindow {
/**
* The name of the channel.
*/
name: string;
}
/**
* Reactive BroadcastChannel
*
* @see https://vueuse.org/useBroadcastChannel
* @see https://developer.mozilla.org/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>;
}