vue3动态组件加载

分三个不同的页面,按照productType的类型来显示哪个页面

<template>
  <RechargeType v-if="productType === 'km'" />
  <GiftCardType v-else-if="productType === 'cz'" />
  <PurchaseType v-else="productType === 'dg'" />
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

const RechargeType = defineAsyncComponent(() => import('./RechargeType.vue'))
const GiftCardType = defineAsyncComponent(() => import('./GiftCardType.vue'))
const PurchaseType = defineAsyncComponent(() => import('./PurchaseType.vue'))

let productType = 'km' // 从服务器获取产品类型
</script>