[Vue]Vue3 中如何通过组件实例属性 $refs 获取 DOM 节点

如果在 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 属性值要保持一致,并且要记得导出变量。

上一篇:vue踩坑之同时使用class切换选中状态和操作dom元素


下一篇:[新手入门]快速学习 ADO.NET Entity Framework系列文章 #1~#2