vue中使用异步组件

瘦瘦瘦瘦不了

于 2021-02-02 16:38:39 发布

阅读量330

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/dreamy_wx/article/details/113564714

基本使用

<template>
    <div>
        <detail-banner></detail-banner>
        <detail-header></detail-header>
        <detail-list></detail-list>
    </div>
</template>

<script>
    import DetailBanner from "./components/Banner"
    import DetailHeader from "./components/Header"
    import DetailList from "./components/List"
    
    export default {
        name: "List",
        components:{
            DetailBanner,
            DetailHeader,
            DetailList
        }
    }
</script>

异步组件使用

<template>
    <div>
        <detail-banner></detail-banner>
        <detail-header></detail-header>
        <detail-list></detail-list>
    </div>
</template>

<script>
    //import DetailBanner from "./components/Banner"
    //import DetailHeader from "./components/Header"
    //import DetailList from "./components/List"
    
    export default {
        name: "List",
        components:{
            DetailBanner:()=> import('./components/Banner'),
            DetailHeader:()=> import('./components/Header'),
            DetailList:()=> import('./components/List')
        }
    }
</script>