背景问题

• 在vue3中input如何获取焦点？
• vue3 setup语法糖如何获取dom元素？

vue2 的方法

在 vue2 中，在组件上设置 ref 属性之后，就可以通过 this.$refs.ref 访问到对应的 DOM 元素。

<input type="text" ref="inputRef" />

在 JavaScript 中可以访问：

this.$refs.usernameInput

如果需要聚焦到输入框：

this.$refs.usernameInput.focus()

vue3

vue3 中没有 $refs，而且没有 this，可以使用 ref() API 来实现：

<template>
  <input type="text" ref="inputRef" />
  <span @click="handleFocus">focus</span>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const inputRef = ref();

console.log(inputRef.value); // undefined！页面元素尚未渲染

onMounted(() => {
  console.log(inputRef.value); // 可以拿到 input 元素！
});

const handleFocus = () => {
  inputRef.value.focus(); // 成功聚焦
};
</script>

如果是多个 input 元素呢？

如果每个输入框对应一个 focus 按钮，那我们可以把它们封装成一个 Vue 组件，这样每个组件中就只有一个 input 啦！

另外，可以通过数组来实现：

<template>
  <div v-for="(item, index) in data">
    <input type="text" :ref="inputRef" />
    <span @click="handleFocus(index)">focus</span>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const data = [1, 2, 3, 4, 5];

const refArr = ref([]);
const inputRef = (el) => {
  refArr.value.push(el);
};

const handleFocus = (index) => {
  refArr.value[index].focus();
};
</script>