<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实现动态组件加载写法
最新推荐文章于 2024-07-11 08:58:44 发布