vue3在父组件里设置子组件里input聚焦

### 实现父组件控制子组件内 `input` 元素聚焦 在 Vue3 中，通过组合式 API 和选项式 API 都可以实现父组件控制子组件中的输入框获取焦点的功能。下面展示两种方式的具体实现。 #### 使用选项式API的方式 定义名为 `ChildComponent` 的子组件，在其中声明了一个用于引用内部 `<input>` 元素的属性 `ref="innerInput"`： ```html <template> <div class="child-component"> <!-- 定义一个带有 ref 属性的 input --> <input type="text" ref="innerInput"/> </div> </template> <script> export default { name: "ChildComponent", mounted(){ // 可选：如果希望页面加载完成后自动获得焦点可在此处调用this.setFocus() }, methods:{ setFocus(){ this.$refs.innerInput.focus(); } } } </script> ``` 接着创建父级组件来管理这个子组件，并尝试在其生命周期钩子函数里操作子组件的方法以达到使子组件里的文本框获焦的目的[^2]： ```html <template> <div id="parentComponent"> <button @click="makeChildFocused">点击让子组件聚焦</button> <ChildComponent ref="childComp"></ChildComponent> </div> </template> <script> import ChildComponent from './components/ChildComponent.vue'; export default { components: { ChildComponent }, setup() { }, methods: { makeChildFocused(){ this.$nextTick(() => { this.$refs.childComp.setFocus(); }); } } }; </script> ``` 这里需要注意的是由于DOM更新是异步的过程，所以在改变状态之后立即执行某些依赖于新DOM结构的操作可能会失败；因此推荐使用 `$nextTick()` 来确保 DOM 已经完成更新后再去设置焦点。 #### 使用组合式API的方式 对于采用 Composition API 编写的应用程序来说，则可以通过暴露特定功能给外部的方式来处理这个问题。这通常涉及到 `defineExpose` 函数以及 `getCurrentInstance` 或者直接利用 `setup` 返回的对象成员来进行公开[^4]。 以下是基于上述思路的一个例子: 子组件部分保持不变, 主要修改父组件逻辑如下所示: ```javascript // ParentComponent.vue <template> <div id="parentComponent"> <button @click="makeChildFocused">Click to Focus Input in Child Component</button> <ChildComponent ref="childCompRef"></ChildComponent> </div> </template> <script lang="ts"> import { defineComponent, nextTick } from 'vue'; import ChildComponent from '@/components/ChildComponent.vue'; export default defineComponent({ components: { ChildComponent }, setup(props){ const childCompRef = ref(null); async function makeChildFocused(){ await nextTick(); if(childCompRef.value?.setFocus) childCompRef.value.setFocus(); } return{ childCompRef, makeChildFocused }; } }); </script> ``` 在这个版本中，`await nextTick()` 确保了任何由上一次渲染引起的 DOM 更新都已经完成，从而使得我们可以安全地请求子组件上的方法并成功应用 `.focus()` 方法。