对 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

上一篇下一篇

猜你喜欢

热点阅读