如何在Vue动态加载组件中为首个输入框应用v-focus指令？

嘿，这个场景我太熟悉了！动态加载组件的时候，普通的v-focus指令经常因为组件还没渲染到位而失效，给你几个实用的解决办法：

方案一：升级自定义v-focus指令，适配动态渲染 #

默认的v-focus指令只会在元素首次插入DOM时触发，但动态加载的组件是后续才挂载的，所以我们可以扩展指令的逻辑，让它在组件更新时也检查并执行聚焦：

Vue 2 版本 #

// 在main.js或者组件内部注册指令
Vue.directive('focus', {
  inserted(el) {
    // 用nextTick确保元素完全渲染完成
    Vue.nextTick(() => {
      // 支持直接绑定在输入框，或者父元素（自动找第一个输入框）
      const targetInput = el.tagName === 'INPUT' ? el : el.querySelector('input')
      targetInput?.focus()
    })
  },
  // 当组件更新（比如动态加载完成）时再次检查
  update(el) {
    Vue.nextTick(() => {
      const targetInput = el.tagName === 'INPUT' ? el : el.querySelector('input')
      // 避免重复聚焦干扰用户操作
      if (targetInput && document.activeElement !== targetInput) {
        targetInput.focus()
      }
    })
  }
})

Vue 3 版本 #

Vue 3的指令钩子有所调整，改用mounted和updated：

// 在main.js中注册
import { createApp, nextTick } from 'vue'
const app = createApp(App)

app.directive('focus', {
  mounted(el) {
    nextTick(() => {
      const targetInput = el.tagName === 'INPUT' ? el : el.querySelector('input')
      targetInput?.focus()
    })
  },
  updated(el) {
    nextTick(() => {
      const targetInput = el.tagName === 'INPUT' ? el : el.querySelector('input')
      if (targetInput && document.activeElement !== targetInput) {
        targetInput.focus()
      }
    })
  }
})

使用的时候，直接把v-focus绑定到动态组件的根元素或者首个输入框上就行：

<!-- 绑定到动态组件根元素 -->
<component :is="dynamicComponent" v-focus></component>

<!-- 或者直接绑定到输入框 -->
<input v-focus type="text" placeholder="自动聚焦我">

方案二：在动态组件内部手动控制聚焦 #

如果只需要特定的动态组件实现自动聚焦，直接在组件的mounted钩子中处理更直观：

<template>
  <div class="dynamic-component">
    <input ref="firstInput" type="text" placeholder="我会自动聚焦">
    <!-- 其他组件内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    // 用nextTick确保DOM完全渲染
    this.$nextTick(() => {
      // 可选链操作符避免refs不存在的报错
      this.$refs.firstInput?.focus()
    })
  }
}
</script>

不管组件是异步加载还是通过v-if动态显示，mounted钩子都会在组件挂载完成后触发，刚好适合执行聚焦操作。

方案三：父组件监听动态组件挂载状态 #

如果父组件负责控制动态组件的加载（比如异步引入组件），可以通过监听组件的挂载状态来触发聚焦：

<template>
  <div>
    <component :is="currentComponent" ref="dynamicComp"></component>
    <button @click="loadComponent">加载动态组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: null
    }
  },
  watch: {
    currentComponent(newComp) {
      if (newComp) {
        this.$nextTick(() => {
          // 找到组件内的第一个输入框并聚焦
          const input = this.$refs.dynamicComp.$el.querySelector('input')
          input?.focus()
        })
      }
    }
  },
  methods: {
    async loadComponent() {
      // 异步加载组件
      const comp = await import('./MyDynamicComp.vue')
      this.currentComponent = comp.default
    }
  }
}
</script>

小提示 #

• 优先用方案一或方案二，代码更简洁且复用性强；
• 如果是多个动态组件需要统一处理，方案一的全局指令最省心；
• 记得用$nextTick（Vue2）或nextTick（Vue3）确保DOM完全渲染后再执行聚焦，避免找不到元素的问题。

内容的提问来源于stack exchange，提问作者Teja D