Vue3之异步组件

异步组件：在项目中将应用分割成一些代码块，减少主包体积，我们就可以用异步组件

子组件：

<template>

    <div>

        <slot name="default"></slot>

        <img style="height: 100px;width:200px;" v-for="item in list" :src="item"/>

    </div>

</template>

<script setup lang="ts">

import {reactive,onUnmounted,onMounted,toRefs} from 'vue'

import {axios} from '../../src/server/axios'

interface data {

    AddUserID:string,

    AddUserIDName:string,

    AdvertisementID:number,

    AdvertisementName:string,

    DeleteUserID:number,

    DeleteUserIDName:string,

    Picture?:string,

    Position?:string,

    Sort:number,

    UpdateUserID?:string,

    UpdateUserIDName?:string,

    Url?:string

}

interface A{

    code:string,

    Msg:string,

    statu:boolean,

    ResData:{

        Context:string,

        CurrentPage:number,

        ItemsPerPage:number,

        TotalItems:number,

        TotalPages:number,

        Items:data[]

    }

}

//可以使用顶层 await。结果代码会被编译成 async setup()

const data:A = await axios.get<A>('/api/Advertisement/GetAdvertisementList?page=1&row=100')

console.log(data)

const  {Items} = (data.ResData)

const list:string[] = reactive([])

Items.forEach(item=>{

        list.push(`https://qny2.dqword.com/${item.Picture}`)

    })

</script>

<style scoped lang="scss">

</style>

父组件：

<template>

 //<suspense> 组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点

<Suspense>

        <template #default>

            <Dialog>

                <template #default>

                    <div>图片展示</div>

                </template>

            </Dialog>

        </template>

        <template #fallback>

            <div>loading...</div>

        </template>

    </Suspense>

</template>

<script setup lang="ts">

//异步组件的引入

const Dialog =  defineAsyncComponent(()=>import('./components/Dialog.vue'))

</script>