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

Question

问题描述

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

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

当前环境

• vue-cli 脚手架搭建的项目

示例代码

懒加载组件

/**
 * 动态加载组件
 * 文件名称async.js
 */
export default {

  WTable: (resolve) => {
    // webpack 支持chunk 名称一致的打包一起，减少请求数量。
    // return import(/* webpackChunkName: "components" */'./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进来（同步加载）就不会有当前的问题
• 也有网友使用，计数的方式。加载一个子组件完成就累加一个数，判断总数就可以了

Answer 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