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

Property	Type	Default	Description
`forwardRef`	`(ref: T \| MaybeElement) => void`	—	Callback to set as `:ref` — forwards child's exposed API and `$el` through the parent
`currentRef`	`Ref<T \| MaybeElement>`	—	Reactive reference to the forwarded element or component instance
`currentElement`	`Readonly<Ref<HTMLElement \| undefined>>`	—	Computed property resolving to the underlying `HTMLElement`, skipping text/comment nodes