Vue中子组件嵌套父组件解决方案

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

平时常的规操作都是父组件嵌套子组件，不知道大家是否有遇到过子组件嵌套父组件的场景。正常情况下，无论如何调用，组件与组件之间应该是互不影响的。

但是在这里面会涉及到一些逻辑问题，导致组件在递归注册的过程中陷入了死循环，发生了如下报错：

经过调试后得到以下几种解决方案：

解决方案：

1. 动态导入：

Vue 只有在这个组件需要被渲染的时候才会触发。这个动态导入会返回一个 Promise 对象。

这种方法还可以在打包的时候避免整个路由打包成一个js文件，提升性能（如果页面较多的话会导致文件非常大，加载缓慢）

export default {
   components: {
        subComp: () => import("@/components/subComp.vue"),
   }
}

2. vue3 的 defineAsyncComponent：

vue3 的 defineAsyncComponent 可以延迟加载，异步加载子组件。官方是这样解释的：

定义一个异步组件，它在运行时是懒加载的。参数可以是一个异步加载函数，或是对加载行为进行更具体定制的一个选项对象

简写版本：

import { defineAsyncComponent } from "vue"

const subComp = defineAsyncComponent(() => import("@/components/subComp.vue"))

完整参数：

const subComp = defineAsyncComponent({
    loader: () => import("@/components/subComp.vue"),
    loadingComponent: LoadingComponent,
    errorComponent: ErrorComponent,
    delay: 1000, 
    timeout: 5000 
})

• loadingComponent : 在加载时显示的组件
• errorComponent : 在发生错误时显示的组件
• delay : 在显示组件之前延迟的时间，单位：毫秒
• timeout ： delay 后的超时时间，单位：毫秒

Vue3 与 Vue2 版本异步组件声明方法的变化：

• Vue2 原来的component 选项在 Vue3 中变为 loader
• 原来 loader 绑定的组件加载函数不再接管resolve和reject参数，且必须返回一个Promise

如果发生如下报错，需要检查一下声明方式是否按照当前系统中 Vue 的版本进行配置

另外如果使用的是装饰器语法，可以这样写：

@Options({components: { subComp: () => import('@/modules/form/views/Form/FormItem.vue') }})

@Options({components: { subComp: defineAsyncComponent(() => import('@/modules/form/views/Form/FormItem.vue')) }})