Vue 3 で動的コンポーネントのインポートを実装する方法を学習します。

Question

この記事によると、コンポーネントを Vue 3 アプリケーションに動的にインポートしたいと考えています。ビューのコードは次のとおりです。

<テンプレート>
  <div class="ページ">
      <latest-box v-if="showlatestBox" />
  </div>
</テンプレート>


<スクリプト>
// @ は /src のエイリアスです
// このメソッドは機能します
//「@/components/latestBox.vue」からlatestBoxをインポートします


デフォルトのエクスポート {
    名前: 'ページ 1'、

    データ（） {
        戻る {
            showlatestBox: true、
        }
    }、

    コンポーネント: {
        最新ボックス: () => import('@/components/latestBox.vue') // このメソッドは無効です
    }
}
</script>

コードはエラーを報告しませんが、ページ上にコンポーネントが表示されません。最初のインポート方法を使用すると、うまくいきます。私は何か見落としてますか？

Answer 1

Vue 3 では、コンポーネントを遅延ロードするには defineAsyncComponent を使用する必要があります

リーリー

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