vue-this.$nextTick(cb)

最新推荐文章于 2025-06-09 15:31:04 发布

原创最新推荐文章于 2025-06-09 15:31:04 发布 · 260 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

前端专栏收录该内容

229 篇文章

订阅专栏

本文讲解了Vue中如何在点击事件后延迟执行聚焦input输入框的操作，避免因页面渲染异步导致的元素未加载问题，通过$nextTick确保焦点在渲染完成后正确获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

this.$nextTick(cb)
cb- - -回调函数，
当页面再次渲染完成后，执行cb回调函数

使用示例：
点击按钮后显示输入框，并且输入框显示时自动获取焦点

代码：

<template>
  <div>
    <h1>APP根组件</h1>
    <input v-if="isVisiable" type="text" ref="inp">
    <button v-else @click="showInp">点击隐藏按钮，显示输入框</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isVisiable: false
    }
  },
  methods: {
    showInp() {
      this.isVisiable = true
      // this.$refs.inp.focus()  直接这样写会报错
      this.$nextTick(() => {
        // console.log(this.$refs.inp);
        this.$refs.inp.focus()
      })
    }
  }
}
</script>

this. $r e f s . i n p . f o c u s () 获取焦点操作要放在 t h i s .$ nextTick(cb) 方法中，
因为页面的渲染是异步操作的，当执行 this.isVisiable = true 后，如果立即执行this. $r e f s . i n p . f o c u s () ，此时页面还没有渲染出 i n p u t 输入框，获取不到该元素，所以会报错，将获取焦点操作放入 t h i s .$ nextTick() 函数中后，页面渲染完成后才会执行里面的代码，渲染完成后就有input元素了，所以就可以执行input元素的操作了