Vue 父组件判断子组件加载懒加载完成

问题描述

在Vue项目中使用require实现懒加载组件,在父组件mounted钩子中触发方法,调用this.$refs.form... 提示未定义。所以,在异步加载子组件,父组件加载完成不能判断子组件也加载完成。

所以想知道父组件如何判断子组件懒加载完成。

当前环境
  • vue-cli 脚手架搭建的项目
示例代码

懒加载组件

export default {

  WTable: (resolve) => {
    // webpack 支持chunk 名称一致的打包一起,减少请求数量。
    // return import('./workspace-table')
    // 同样是懒加载,支持会友好些
    require(["./workspace-table"], resolve);
  },
  WQuery: (resolve) => {
    console.log("加载wq", resolve);
    require(["./workspace-query"], resolve);
  },
}

父组件运用

<template>
  <div>
    <WQuery ref="form"></WQuery>
  </div>
</template>
<script>
import coms from "@/components/async.js";
export default {
  mounted() {
    console.log(this.$refs.form);
  },
  components: {
    ...coms
  }
};
</script>
补充
  • 尝试过在父组件使用$nextTick,还是相同的结果。如果是直接import进来(同步加载)就不会有当前的问题
  • 也有网友使用,计数的方式。加载一个子组件完成就累加一个数,判断总数就可以了
已解决 悬赏分:80 - 解决时间 2021-11-28 08:43
反对 0举报 0 收藏 0

回答1

最佳
  • @
    <template>
      <div>
        <WQuery @hook:mounted="childMounted"></WQuery>
      </div>
    </template>
    <script>
    import coms from "@/components/async.js";
    export default {
      mounted() {
        console.log(this.$refs.form);
      },
      components: {
        ...coms
      },
      methods: {
        childMounted () {
          alert('childMounted')
        },
      },
    };
    </script>

    如上:利用子组件的 hook 函数,可在父组件监听到子组件 mounted 钩子

    By @gauseen

    支持 0 反对 0 举报
    2021-11-27 10:05