vue3ref获取元素

Posted web半晨

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3ref获取元素相关的知识,希望对你有一定的参考价值。


1、概念

利用ref函数获取组件中的标签元素。


2、示例代码

功能需求

让输入框自动获取焦点。


<template>
  <h2>ref的另一个作用:可以获取页面中的元素</h2>
  <input type="text" ref="inputRef" />
</template>

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,
    };
  },
});

以上是关于vue3ref获取元素的主要内容,如果未能解决你的问题,请参考以下文章

JS常用代码片段2-值得收藏

JS常用代码片段2-值得收藏

从自定义适配器获取片段中的 UI 元素 ID

VSCode自定义代码片段5——HTML元素结构

VSCode自定义代码片段5——HTML元素结构

VSCode自定义代码片段5——HTML元素结构