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 收藏 0

回答1

最佳

@lsupper

<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