Vue3动态加载异步组件

很多情况一个页面下可能存在多个Dialog弹框或Drawer抽屉组件，可借助defineAsyncComponent+component提供的能力来实现。

<script setup lang="ts">
  const currentComponent = shallowRef()
  const showComponent = ref(false)
  
  const handleShowComponent = (name) => {
    currentComponent.value = defineAsyncComponent(
      () => import(`./${name}.vue`)
    )
    showComponent.value = true
  }
</script>

<template>
  <div>
    <UseElButton
      btnText="显示XXX弹框"
      @click="handleShowComponent('XxxDialog')"
    />

     <UseElButton
      btnText="显示YYY抽屉"
      @click="handleShowComponent(('YyyDrawer'))"
    />

    <component
      v-if="showComponent"
      v-model="showComponent"
      :is="currentComponent"
    />
  </div>
</template>