Erfahren Sie, wie Sie den dynamischen Komponentenimport in Vue 3 implementieren

Question

Laut diesem Artikel möchte ich Komponenten dynamisch in meine Vue 3-Anwendung importieren. Der Code für die Ansicht lautet wie folgt:

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


<script>
// @ ist ein Alias ​​für /src
// Diese Methode funktioniert
// LatestBox aus '@/components/LatestBox.vue' importieren


Standard exportieren {
    Name: 'Seite 1',

    Daten() {
        zurückkehren {
            showLatestBox: wahr,
        }
    },

    Komponenten: {
        LatestBox: () => import('@/components/LatestBox.vue') // Diese Methode ist ungültig
    }
}
</script>

Der Code meldet keinen Fehler, aber ich kann die Komponente auf der Seite nicht sehen. Wenn ich die erste Importmethode verwende, funktioniert es. Habe ich etwas verpasst?

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