DEV Community

Discussion on: An Introduction to Vue 3 and Typescript: Refs and reactivity

View post
Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt • • Edited

I don't know if it have changed recently, but

const audioPlayerElement = ref<HTMLAudioElement>();
Enter fullscreen mode Exit fullscreen mode

Works, and it is actually Ref<HTMLAudioElement | undefined>.

I don't think it is mentioned yet, but ref can also be used outside <script setup> or Vue components; then referenced to multiple components.

Furthermore, the above-mentioned audioPlayerElement isn't typed in <template> with Volar. Correction:

<template>
<audio :ref="(el) => (audioPlayerElement = el)">
    <source type="audio/mpeg" />
</audio>
</template>
Enter fullscreen mode Exit fullscreen mode

And, <audio :ref="audioPlayerElement"> doesn't work.