如何动态导入Vue 3组件？

Question

如何动态导入Vue 3组件？

11

根据这篇文章，我想将组件动态导入到我的Vue 3应用程序中。视图的代码如下：

<template>
  <div class="page">
      <latest-box v-if="showLatestBox" />
  </div>
</template>


<script>
// @ is an alias to /src
// This works well. 
//import LatestBox from '@/components/LatestBox.vue'


export default {
    name: 'Page 1',

    data() {
        return {
            showLatestBox: true,
        }
    },

    components: {
        LatestBox: () => import('@/components/LatestBox.vue')  // This does not work
    }
}
</script>

代码没有报错但是页面上没有看到组件。如果我使用第一个导入样式，它可以工作。我漏掉了什么吗？

- Čamo

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user16354282 · Accepted Answer

你需要在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