转自个人网站:https://www.jinxiaoliang.cn
当我们在使用Element UI中的Tag组件时,我们能看到这样的代码
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
})
上述三行的代的作用是自动获取input输入框的焦点。
this.$ refs.saveTagInput.$ refs.input.focus() 是通过$ refs获取input DOM对象,然后调用focus()方法自动获取焦点。
$ nextTick 的作用是 当页面上元素被重新渲染之后,才会执行回调函数。
我们试想一下,如果没有使用 $ nextTick 函数时,会出现什么后果呢?
如果我们直接执行
this.$ refs.saveTagInput.$refs.input.focus(),这时,input文本框还未被渲染在页面中,这个时候去获取input DOM对象,结果是会报错。