根据这篇文章，我想要将组件动态地导入到我的Vue 3应用程序中。视图的代码如下：
1
1174<template>
<div class="page">
<latest-box v-if="showLatestBox" />
</div>
</template>
<script>
// @ 是 /src 的别名
// 这种方式有效
//import LatestBox from '@/components/LatestBox.vue'
export default {
name: 'Page 1',
data() {
return {
showLatestBox: true,
}
},
components: {
LatestBox: () => import('@/components/LatestBox.vue') // 这种方式无效
}
}
</script>
代码没有报错，但是我在页面上看不到组件。如果我使用第一种导入方式，它可以工作。我漏掉了什么吗？
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
在Vue 3中，你需要使用
defineAsyncComponent来懒加载组件import { defineAsyncComponent } from 'vue' ... components: { LatestBox: defineAsyncComponent(() => import('@/components/LatestBox.vue')) }https://v3-migration.vuejs.org/breaking-changes/async-components.html#overview