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


    一、问题产生背景:

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

    // 父组件调用子组件,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
  • 相关阅读:
    Nginx入门使用
    下载pcre-8.35.tar.gz
    后端传到前端时间问题
    Layui弹出层分割线
    CSS动画实例:图文切换
    JavaScript小游戏实例:简单的键盘练习
    JavaScript小游戏实例:统一着色
    JavaScript动画实例:炸开的小球
    JavaScript动画实例:烟花绽放迎新年
    JavaScript动画实例:圆点的衍生
  • 原文地址:https://www.cnblogs.com/ahao68/p/11206318.html
Copyright © 2020-2023  润新知