vue3实现动态组件加载写法

代码示例

<script lang="ts" setup>
import { defineAsyncComponent, ref } from 'vue'

// 需要加载的组件集合
const components = ref(new Map<string, any>())
components.value.set(
  'MyTag',
  defineAsyncComponent(() => import('./MyTag.vue'))
)
components.value.set(
  'Item',
  defineAsyncComponent(() => import('./Item.vue'))
)
// 默认加载的组件名
const compName = ref('MyTag')
// 组件切换
function onClick() {
  if (compName.value === 'MyTag') {
    compName.value = 'Item'
  } else {
    compName.value = 'MyTag'
  }
}
</script>

<template>
  <div>
    <el-button @click="onClick">改变组件</el-button>
    <component :is="components.get(compName)"></component>
  </div>
</template>

<style lang="scss" scoped></style>

参考文章

Vue3 局部无注册动态渲染组件

vue组件的全局注册和局部注册原理解析

你可能不知道的动态组件玩法

webpack的异步加载原理及分包策略

vue3+vite2增加element-plus的CDN链接打包构建