1.用法
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。
2.举例
<input v-show="todo.isedit" type="text" :value="todo.title" @blur="handleBlur(todo,$event)" ref="inputFocus"/>
<button v-show="!todo.isedit" @click="handleEdit(todo)">编辑</button>
// 编辑 走编辑方法时还没有解析input框呢
handleEdit (todo) {
// 给todo添加一个isedit属性,handleBlur操作时已经有了isedit属性
if (todo.hasOwnProperty('isedit')) {
todo.isedit = true
} else {
this.$set(todo, 'isedit', true)
}
// 走编辑方法时还没有解析input框呢 只有走了 handleBlur 方法 input才会反应,所以此时this.$refs.inputTitle undefined,所以加定时器延迟点时间
// setTimeout(()==>{
// // 获取焦点
// this.$refs.inputTitle.focus()
// },200)
// 或者 $nextTick意思是 所有dom都解析完之后在下一次触发 this.$refs.inputTitle.focus()
this.$nextTick(function () {
console.log('this指的是:',this)
console.log('获取焦点了:',this.$refs.inputFocus.focus)
this.$refs.inputFocus.focus()
})
},
部分代码:逻辑是点击编辑时input文本框可以获取焦点(光标在游戏两字后面)。因为触发handleEdit方法时,input文本框还没有解析这个时候还没有文本框,所以 this.$refs.inputFocus
这个时候是undefined,这个时候handleEdit执行到this.$nextTick 时,它会等到所有dom都更新完之后包括input,这个时候在获取焦点就不会为undefined了,其实相当于一个定时器等待dom全部更新完。也可以用setTimeout实现,请看如上代码。
WeChat_20221104104711