Vue.js 3 中如何让 input 输入框在方法中自动聚焦？

2024-03-03 00:40:43

在 Vue.js 3 中让 input 输入框在方法中自动聚焦

前言

在 Vue.js 中，ref 是用于引用组件 DOM 元素的强大工具。在 Vue.js 3 中，由于引入了 Composition API，对 ref 的访问方式发生了变化。本文将深入探讨如何在 Vue.js 3 中访问 ref，并提供一个详细的解决方案，让 input 输入框在方法中自动聚焦。

Composition API 下的 Ref

在 Vue.js 3 中，我们使用 Composition API 来初始化组件的状态和方法。要创建 ref，可以使用 ref() 函数：

const myInputRef = ref(null)

这将创建一个名为 myInputRef 的 ref，我们可以使用它来访问 DOM 元素。

在方法中使用 Ref

创建 ref 后，我们可以在方法中使用它来执行操作。例如，要设置 input 输入框的焦点，我们可以使用以下代码：

const submitData = () => {
  myInputRef.value.focus()
}

通过使用 value 属性，我们可以获取 DOM 元素并调用 focus() 方法。

示例实现

将上述代码与你的组件结合起来，我们得到以下实现：

<template>
  <input ref="myinput" />
  <button @click="submitData" />
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const myInputRef = ref(null)

    const submitData = () => {
      myInputRef.value.focus()
    }

    return {
      myInputRef,
      submitData
    }
  }
}
</script>

常见问题解答

为什么在 Vue.js 3 中访问 ref 的方式发生了变化？

这是 Composition API 引入的结果，它改变了 Vue.js 中状态和方法的访问方式。
除了 focus()，我还可以使用 ref 做什么？

ref 可以用于任何需要访问 DOM 元素的操作，例如获取元素的属性、尺寸或位置。
如果我想在多个组件中使用相同的 ref 怎么办？

在这种情况下，可以使用根组件的 provide() 和 inject() 函数。