vue3实现动态组件加载写法
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链接打包构建