docs(carousel): use useTemplateRef

This commit is contained in:
Benjamin Canac
2024-10-15 15:21:53 +02:00
parent 8258cd3829
commit 46bd1cb002

View File

@@ -257,13 +257,29 @@ ignore:
### Expose
When accessing the component via a template ref, you can use the following:
You can access the typed component instance using [`useTemplateRef`](https://vuejs.org/api/composition-api-helpers.html#usetemplateref).
```vue
<script setup lang="ts">
const carousel = useTemplateRef('carousel')
</script>
<template>
<UCarousel ref="carousel" />
</template>
```
This will give you access to the following:
| Name | Type |
| ---- | ---- |
| `emblaRef`{lang="ts-type"} | `Ref<HTMLElement \| null>`{lang="ts-type"} |
| `emblaApi`{lang="ts-type"} | [`Ref<EmblaCarouselType \| null>`{lang="ts-type"}](https://www.embla-carousel.com/api/methods/#typescript) |
::note{to="https://vuejs.org/api/composition-api-helpers.html#usetemplateref" target="_blank"}
You can use `useTemplateRef` to get the component instance.
::
## Theme
:component-theme