【vue && 弹窗】vue项目弹窗组件加载ref值获取不到

问题描述

vue项目中，主页面使用弹窗时，在弹窗组件加载时的ref值在文件中获取不到

原因分析

refs数据在弹窗挂载之前拿，此时弹窗DOM并没有挂载，拿不到DOM
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

解决方案：

使用 this.$nextTick拿值
原始：

paymentOptionChange(value) {
      if (Number(value) === 1) {
        this.dialog1Visible = true; 
        this.$refs.bankTable.queryList();//获取不到 undefined
      }
    },

改进：

paymentOptionChange(value) {
      if (Number(value) === 1) {
        this.dialog1Visible = true;
        this.$nextTick(() => {// nextTick获取
          this.$refs.bankTable.queryList();
        });
      }
},