登录
原创

vue-this.$nextTick(cb)

发布于 2022-04-07 阅读 309
  • 前端
  • Vue.js
原创

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>

image.png

this.refs.inp.focus() 获取焦点操作要放在 this.nextTick(cb) 方法中,
因为页面的渲染是异步操作的,当执行 this.isVisiable = true 后,如果立即执行this.refs.inp.focus(),此时页面还没有渲染出 input 输入框,获取不到该元素,所以会报错, 将获取焦点操作放入 this.nextTick() 函数中后,页面渲染完成后才会执行里面的代码,渲染完成后就有input元素了,所以就可以执行input元素的操作了

评论区

零00
7粉丝

时光荏苒,我自清欢

0

0

0

举报