父子组件渲染时有属性依赖

子组件渲染时依赖父组件属性

• 场景：在父组件mounted生命周期中拿到接口返回的值，需要把值传到子组件在作为入参请求接口，这种情况下有可能还没有等父组件请求完接口拿到返回值，子组件就已经请求接口了，导致参数不完整。为避免这种情况，需在子组件上添加v-if条件判断，等父组件接口返回有值后再渲染子组件。

<template>
  <div class="pfs-gfa-two-set-check">
    <!-- TODO:头部区域，需要依赖父组件传参，在子组件上增加v-if，等有值在渲染 -->
    <v-header ref="header" :taskInfo="taskInfo" v-if="isEmpty(taskInfo)" />
  </div>
</template>
<script>
import util from "@/assets/js/util";
import { getTaskInfo } from "@/modules/pfs/pfs-gfa/common/gfa-service";
import { TASK_TYPE } from "@/modules/pfs/pfs-gfa/common/gfa-constant";
import vHeader from '@/modules/pfs/pfs-gfa/pfs-gfa-examine/pfs-gfa-two-set-check/header';
export default {
  components: {
    vHeader,
  },
  data() {
    return {
      contextInfo: {},//上下文信息
      taskInfo: {},//任务信息
    }
  },
  methods: {
    /**
     * 初始化页面
     */
    async initPage() {
      try {
        this.$loading();
        await this.getTaskInfo();
      } catch (err) {
        console.error(err);
        this.$message({
          type: 'error',
          message: err.msg,
        });
      } finally {
        this.$loadingClose();
      }
    },
    /**
     * 获取代列任务
     */
    async getTaskInfo() {
      try {
        if (util.isEmptyObject(this.taskInfo)) {
          let { mofDivCode, fiscalYear } = this.contextInfo;
          let taskInfo = await getTaskInfo(
            mofDivCode,
            fiscalYear,
            TASK_TYPE.CHECK_TASK.code,
          );
          this.$set(this.$data, 'taskInfo', taskInfo);
        }
      } catch (err) {
        return Promise.reject(err);
      }
    },
    /**
     * 值是否为空
     */
    isEmpty(val) {
      return util.isEmptyObject(val);
    },
  },
  mounted() {
    this.initPage();
  },
}
</script>

父组件中获取子组件方法

• 场景：父组件在初始化时，通过refs调用子组件方法，子组件可能未完成渲染，直接调用可能存在获取子组件引用为null的情况，此时，可以增加定时器来判断子组件是否渲染完毕

<template>
  <div class="pfs-gfa-two-set-check">
    <!-- 查询单位-->
    <v-select-agency ref="selectAgency" />
  </div>
</template>
<script>
import vSelectAgency from '@/modules/pfs/pfs-gfa/pfs-gfa-examine/pfs-gfa-two-set-check/select-agency';

export default {
  components: {
    vSelectAgency,
  },
  data() {
    return {
      timer: null,	//定时器对象
    };
  },
  methods: {
    /**
     * 初始化页面
     *  1、选择单位弹窗打开
     */
    init() {
      this.selectAgency();
    },
    /**
     * 选择单位弹窗
     * TODO:1、由于子组件可能未渲染完毕，所以此处通过定时器动态获取子组件，子组件加载完成之后，调用打开方法
     */
    selectAgency() {
      this.timer = setInterval(() => {
        let el = this.$refs.selectAgency;
        if (el) {
          clearInterval(this.timer);
          el.open();
        }
      }, 200);
    },
  },
  mounted() {
    this.init();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
}
</script>