如果在 Composition API(组合式API) 中,无法访问到组件实例 this
,那么在Vue3中如何调用 this 上实例属性 $refs
呢?
方式如下:
<template>
<div>
<audio ref="audioRef" />
</div>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name: 'Demo',
setup() {
const audioRef: any = ref(null)
console.log(audioRef) // => audio 元素节点
return { audioRef } // 必须要导出 audioRef
}
})
</script>
通过 ref() 函数,初始值为 null,在 TS 中,必须为变量audioRef指定类型为any。注意:变量名与标签的 ref 属性值要保持一致,并且要记得导出变量。