vue3.0 ref的另一个作用:可以获取页面中的元素
<template>
<h2>ref的另一个作用:可以获取页面中的元素</h2>
<input type="text" ref="inputRef" />
</template>
<script lang='ts'>
import { onMounted, ref } from "vue"
export default {
// 需求:当页面加载完毕后,页面中的文本框可以直接获取脚垫(自动获取焦点)
setup() {
// 默认是空的,页面加载完毕后,说明组件已经存在了,获取文文本框元素
const inputRef = ref<HTMLInputElement | null>(null);
// 页面加载后的生命周期组合API
onMounted(() => {
//标签存在 获取焦点
inputRef.value && inputRef.value.focus() // 自动获取焦点
})
return { inputRef }
}
}
</script>