点击按钮使输入框自动聚焦需用 ref 获取 dom 元素并调用 .focus()，确保元素已渲染且 ref 正确绑定；对 v-if 或 v-for 场景应配合 nexttick 或函数式 ref；ios 等环境须由用户手势直接触发，避免异步调用。
点击按钮让输入框自动聚焦，核心是用 ref 拿到 DOM 元素，再调用 .focus() 方法。关键在于确保元素已渲染、且 ref 已正确绑定。
基础写法：单个输入框 + 按钮
这是最常见也最稳妥的实现方式：
- 给
<input>添加ref="inputRef" - 在
<script setup></script>中用ref(null)声明同名响应式引用 - 按钮点击时，检查
inputRef.value是否存在，再调用.focus()
示例代码：
<template><input ref="inputRef" type="text" placeholder="点按钮来聚焦我"><button>聚焦输入框</button>
</template><script setup>
import { ref } from 'vue'
const inputRef = ref(null)
function focusInput() {
if (inputRef.value) {
inputRef.value.focus()
}
}
</script>
处理动态或条件渲染的输入框
如果输入框是 v-if 控制显示、或在列表中动态生成，ref 可能为 null 或未及时更新：
- 避免直接在 click 回调里立即调用
focus()，尤其当输入框刚从隐藏变为显示时 - 改用
nextTick确保 DOM 更新完成后再聚焦 - 对 v-for 列表，推荐用函数式 ref 收集多个引用（如
:ref="(el) => el && (inputRefs.value[index] = el)"）
例如 v-if 场景：
<input v-if="showInput" ref="inputRef" type="text"><button true> inputRef.value?.focus())">显示并聚焦</button>
兼容 iOS 等聚焦受限环境
部分 iOS 版本或 WebView 中，非用户手势触发的 focus() 会被忽略：
- 必须确保聚焦操作由真实的用户点击（
@click）直接触发，不能包裹在异步回调或定时器里 - 若仍无效，可封装一个自定义指令
v-focus，在inserted钩子中调用el.focus() - 指令方式更可靠，因为它是 DOM 插入时同步执行，且属于用户交互链路的一部分
注意事项
几个容易出错的点：
-
不要在模板中写
ref="inputRef"却在 script 里漏声明const inputRef = ref(null)，否则inputRef.value始终为null -
不要在未挂载组件（如 setup 顶层）就调用
focus()，此时 DOM 尚未生成 - input 必须是可聚焦元素（
disabled为 false，tabindex不为 -1） - 使用 Element Plus 等组件库时，ref 指向的是组件实例，需通过
.input或.focus()方法间接操作底层 input
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
