问题描述
在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
分享 2
回答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