vue3快速入门-ref获取元素DOM

本系列文章合集click me

本系列文章源码click me

Vue2

在 Vue2.X 中是先在 标签上定义 :ref='XXX' 然后 this.$refs.XXX 来获取

Vue3

1. 在标签上定义 ref='XXX 不需要冒号: 也就是 v-bind 的缩写
2. 在 setup 中得给 ref 指定类型 HTMLElement

<template>
  <div id="app">
    <input type="text" placeholder="正常input" />
    <input type="text" ref="focusIpt" placeholder="自动聚焦" />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  setup() {
    const focusIpt = ref<HTMLElement | null>(null);

    // 在setup执行时，template中的元素还没挂载到页面上，所以必须在mounted之后才能获取到元素。
    onMounted(() => {
      focusIpt.value?.focus();
    });

    return { focusIpt };
  },
});
</script>