VUE3之Component(三)

suspense和异步组件结合使用

使用suspense标签,并在其中的template中指定default和fallback,这样也能达到在default中的元素加载失败后去加载fallback中元素的效果。

<template>
    <div>
        <suspense>
            <template #default>
                <async-category></async-category>
            </template>
            <template #fallback>
                <loading></loading>
            </template>
        </suspense>
    </div>
</template>

<script>
import {defineAsyncComponent} from "vue";


import Loading from "./Loading.vue";eAsyncComponent(()=>import("./AsyncCategory.vue"));
    export default {
        components:{
            AsyncCategory,
            Loading
        }
        
    }
</script>

发表评论