學習如何在Vue 3中實現動態元件導入

Question

根據這篇文章，我想要將元件動態地匯入到我的Vue 3應用程式中。視圖的程式碼如下：

<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>

程式碼沒有報錯，但是我在頁面上看不到元件。如果我使用第一種導入方式，它可以工作。我漏掉了什麼嗎？

Answer 1

在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