Vue2 中使用 ref
<h3 ref="myRefs">
<script>
export default {
mounted(){
this.$refs.myRefs.xxxxxx
}
}
</script>
Vue3 中使用 ref
ref获取元素:利用ref函数获取组件中的标签元素
功能需求:让输入框自动获取焦点
因为调用setup的时候并没有渲染好dom标签,所以定义的时候需要保留 null 选项
<template>
<h2>App</h2>
<input type="text">---
<input type="text" ref="inputRef">
</template>
<script lang="ts">
import { onMounted, ref } from 'vue'
export default {
setup() {
const inputRef = ref<HTMLElement|null>(null)
onMounted(() => {
inputRef.value && inputRef.value.focus()
})
return {
inputRef
}
},
}
</script>