useForwardExpose

Forward component's exposed value, props and $el.

When building a component, if we have a non-single root node component, the template refs will not return the DOM element via $el (read more) , thus, we need to forward the $el in template ref for this component manually. Or in some case you want to target certain element as the expose element..

Futhermore, this composable extend the missing exposed props from the template refs.

Usage

<script setup lang="ts">
import { useForwardExpose } from 'radix-vue'

const selectedElementId = ref(1)
const { forwardRef } = useForwardExpose()
</script>

<template>
  <span>
    <!-- We want to expose div as the template ref's element -->
    <div :ref="forwardRef">
      ...
    </div>
  </span>
</template>