vue的$nextTick使用后的js代码执行顺序问题

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

一、问题产生背景：

　　父组件已经获得子组件实例，并能直接触发子组件的方法，在父组件中调用了子组件的两个方法

// 父组件调用子组件，this.picker是获取的子组件整个实例，先调用update，再调用setSlotValue
this.picker.update();
 const pro = {
    first_char: "A",
    parent_id: "1",
    region_id: "3",
    region_name: "安徽",
    sort_order: "255",
    type: "1"
}
this.picker.setSlotValue(0, pro);

// 子组件的update、setSlotValue方法以及update中调用的translate2Value方法
// update方法
 update() {
      console.log(1);
      this.$nextTick(() => {
        this.translate2Value();
      });
}, 
// translate2Value方法
translate2Value () {
    console.log(3)
}
// setSlotValue方法
setSlotValue(slotIndex, soltVal) {
      console.log(2);
      for (let [index, slot] of this.slots[slotIndex].values.entries()) {
        if (this.isObjectValueEqual(soltVal, slot)) {
          // 这里改变了页面dom元素样式  
          this.ul_slots[slotIndex].style.WebkitTransform = "translate3d(0px," + -(index * this.itemHeight) + "px,0px)";
          return;
        }
      }
}   

// 因为nextTick是等待页面dom变化时渲染完毕时才执行的，所以执行结果为：
1 2 3
// update方法去掉this.$nextTick，执行结果为：
1 3 2

以上是 vue的$nextTick使用后的js代码执行顺序问题 的全部内容， 来源链接： utcz.com/z/374679.html

回到顶部