对 vue 中 $nextTick的一次认识
2020-11-11 本文已影响0人
b0a4e16b967c
官方解释:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
解释很合理,那么什么场景下会用到呢?我是这么用到的。请看下面案例:
// 父组件中
<form-business ref="ywksajsh" v-if="curSelectTab === 'ywksajsh'" :basicForm="JSON.parse(nextParams)" @updateFun = "updateFun" />
// 父组件中我用到的是tab 切换,如果切换到谁,就去调谁里面的方法。
tagClick(tag) {
this.curSelectTab =' ywksajsh ';
this.$nextTick(()=> {
this.$refs[this.curSelectTab].handleInfo({});})
});
}
// 子组件里面定义了一个 handleInfo 的方法, 如果当
this. curSelectTab =' ywksajsh ' ;
this.$refs[this.curSelectTab].handleInfo({});})
// 这样子是无法取到 这个节点。因为 vue响应式的改变一个值以后,此时的dom并不会立即更新;所以才会需要 $ nextTick