Ketahui cara melaksanakan import komponen dinamik dalam Vue 3

Question

Menurut artikel ini, saya mahu mengimport komponen secara dinamik ke dalam aplikasi Vue 3 saya. Kod untuk paparan adalah seperti berikut:

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


<skrip>
// @ ialah alias untuk /src
// Kaedah ini berfungsi
//import LatestBox daripada '@/components/LatestBox.vue'


eksport lalai {
    nama: 'Halaman 1',

    data() {
        kembali {
            showLatestBox: benar,
        }
    },

    komponen: {
        LatestBox: () => import('@/components/LatestBox.vue') // Kaedah ini tidak sah
    }
}
</script>

Kod tidak melaporkan ralat, tetapi saya tidak dapat melihat komponen pada halaman. Jika saya menggunakan cara pertama mengimport, ia berfungsi. Adakah saya terlepas sesuatu?

Answer 1

Dalam Vue 3, anda perlu menggunakan defineAsyncComponent untuk malas memuatkan komponen

import { defineAsyncComponent } from 'vue'
...
    components: {
        LatestBox: defineAsyncComponent(() => import('@/components/LatestBox.vue'))
    }

https://v3-migration.vuejs.org/breaking-changes/async-components.html#overview