vue3使用7--ref获取html页面元素

  //例子需求：当页面加载完毕后，页面中的文本框可以直接获取焦点（自动获取焦点）

1、代码

<template>
  <h2>ref的另一个作用：可以获取页面中的元素</h2>
  <input type="text" ref="inputRef" />
</template>
<script lang="ts">
import { defineComponent, onMounted, ref} from 'vue'
export default defineComponent({
  name: 'App',
  //例子需求：当页面加载完毕后，页面中的文本框可以直接获取焦点（自动获取焦点）
  setup(){
    //默认是空的，页面加载完毕，说明组件已经存在了，获取文本框元素
    const inputRef = ref<HTMLElement | null>(null)
    //页面加载后的生命周期组合API
    onMounted(()=>{
      inputRef.value&&inputRef.value.focus()  //如果已创建，自动获取 
    })

    return{
      inputRef
    }
  }
})
</script>
<style>
</style>

2、实现