Découvrez comment implémenter l'importation de composants dynamiques dans Vue 3

Question

Selon cet article, je souhaite importer dynamiquement des composants dans mon application Vue 3. Le code de la vue est le suivant :

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


<script>
// @ est un alias pour /src
// Cette méthode fonctionne
// importer LatestBox depuis '@/components/LatestBox.vue'


exporter par défaut {
    nom : 'Page 1',

    données() {
        retour {
            showLatestBox : vrai,
        }
    },

    Composants: {
        LatestBox : () => import('@/components/LatestBox.vue') // Cette méthode n'est pas valide
    }
}
</script>

Le code ne signale pas d'erreur, mais je ne vois pas le composant sur la page. Si j'utilise la première méthode d'importation, cela fonctionne. Ai-je manqué quelque chose?

Answer 1

Dans Vue 3, vous devez utiliser defineAsyncComponent pour charger paresseusement les composants

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

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