Vue.js中＜input ref=“input“＞

在Vue.js中，ref是一个特殊的属性，用于注册一个引用信息。这个引用信息可以用来直接访问DOM元素或子组件实例。

对于<input ref="input">，这里我们通过ref属性将该<input>元素注册为名为"input"的引用。之后，在Vue实例或组件的方法中，你可以使用this.$refs.input来直接访问这个<input>元素。

以下是一个简单的例子，演示了如何使用ref来访问<input>元素：

<template>  
  <div>  
    <input ref="input" placeholder="输入内容">  
    <button @click="focusOnInput">聚焦输入框</button>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    focusOnInput() {  
      // 使用 this.$refs.input 来访问 <input> 元素  
      this.$refs.input.focus();  
    }  
  }  
}  
</script>

在上面的例子中，当点击"聚焦输入框"按钮时，会触发focusOnInput方法。这个方法通过this.$refs.input来访问<input>元素，并调用其focus()方法，使输入框获得焦点。

需要注意的是，$refs只会在组件渲染完成后被填充，并且它是非响应式的。因此，不应该在模板或计算属性中使用$refs。

<script setup>中使用 ref 来获取 DOM 元素并聚焦输入框

<template>  
  <div>  
    <input ref="inputRef" placeholder="输入内容">  
    <button @click="focusOnInput">聚焦输入框</button>  
  </div>  
</template>  
  
<script setup>  
import { ref, onMounted } from 'vue';  
  
// 创建一个响应式引用来存储 input 元素的引用  
const inputRef = ref(null);  
  
// 定义一个方法来聚焦输入框  
function focusOnInput() {  
  // 确保 inputRef.value 存在且是 DOM 元素  
  if (inputRef.value) {  
    inputRef.value.focus();  
  }  
}  
  
// 使用 onMounted 钩子来确保 DOM 元素已渲染  
onMounted(() => {  
  // 这里通常不需要立即聚焦，除非有特别的需求  
  // 只是为了演示如何确保 DOM 元素已存在  
  console.log(inputRef.value); // 这将打印出 input DOM 元素的引用  
});  
</script>

在这个例子中，inputRef 是一个响应式引用，它会被自动地绑定到模板中带有 ref="inputRef" 属性的 input 元素上。在 focusOnInput 方法中，我们通过 inputRef.value 访问 DOM 元素并调用其 focus() 方法来实现聚焦。

注意，在 onMounted 钩子中打印 inputRef.value 主要是为了演示如何在组件挂载后访问 DOM 元素。在大多数情况下，你不需要在 onMounted 中立即进行 DOM 操作，除非有特定的初始化需求。在本例中，onMounted 仅仅用于演示如何确保 DOM 元素已存在。