标签：异步 vue Vue2 ErrorComponent 组件 import 加载

什么是异步组件

所谓的异步组件就是通过import或者require导入的vue组件。

为什么需要异步组件

vue开发过程中，我们会做出特别多的组件，包括login,header,footer,main等等，会使页面打开很慢。

异步组件的作用

可以避免页面一加载时就去加载全部的组件，从而导致页面访问时间变长的问题。使用异步加载组件后，只有当需要某个组件时才会去加载需要的组件。

异步组件加载

<template>
    <div>
        <component :is="n"></component>
         <AsyncComponent></AsyncComponent>
        <Box2></Box2>
    </div>
</template>

<script>
    import a from "./a.vue"
    import LoadingComponent from "./LoadingComponent.vue"//自定义组件
    import ErrorComponent from "./ErrorComponent.vue"//自定义的组件
    
    export default {
        data() {
            return {
                n: "Box1"
            }
        },
        methods: {
            fn() {
                this.n = "Box2"
            }
        },
        components: {
            Box1: a,
            Box2: () => ({
                // 需要加载的组件 (这个 `import` 函数会返回一个 `Promise` 对象。)
                component: import('./b.vue'),
                // 异步组件加载时使用的组件
                loading: LoadingComponent,
                // 加载失败时使用的组件
                error: ErrorComponent,
                // 展示加载时组件的延时时间。默认值是 200 (毫秒)
                delay: 200,
                // 如果提供了超时时间且组件加载也超时了，
                // 则使用加载失败时使用的组件。默认值是：`Infinity`
                timeout: 3000,
            })，
　　　　　　　AsyncComponent:()=>import('@/components/asyncComponent.vue')
        }
    }
</script>

<style>
</style>

标签：异步,vue,Vue2,ErrorComponent,组件,import,加载
来源： https://www.cnblogs.com/LIXI-/p/16672518.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。