useForwardExpose

v0.0.14testeddemo

Forwards a child component's exposed API and DOM element (`$el`) through the parent component. Useful for wrapper / headless components that need to transparently proxy the inner component's ref to the consumer. Merges the parent's own props and any prior `expose()` bindings onto `instance.exposed`, then updates them when `forwardRef` is called with a child element or component instance.

Source Tests

Examples

const { forwardRef, currentElement } = useForwardExpose();
// Template: <ChildComponent :ref="forwardRef" />

const { forwardRef, currentRef } = useForwardExpose<InstanceType<typeof MyInput>>();
// Template: <MyInput :ref="forwardRef" />
// currentRef.value exposes MyInput's public API

Demo

Loading demo…

Signature

export function useForwardExpose<T extends ComponentPublicInstance>(): UseForwardExposeReturn<T>{ ... }

Type Parameters

Textends ComponentPublicInstance

Returns

UseForwardExposeReturn<T>An object with `forwardRef`, `currentRef`, and `currentElement`