SPA Vue.js に共通コンポーネントのヘッダーとフッターを含める方法

Question

vuejs spa でプロジェクトを作成しています。メインの App.vue に含めたい共通コンポーネントのヘッダーとフッターを作成しました。

以下にコード構造を共有します。

2. ファイル App.vue を共有しています:

<テンプレート>

 <ヘッダー></ヘッダー>

</テンプレート>

<スクリプト>

「./components/Header.vue」からヘッダーをインポート
// 'components/Footer.vue' からフッターをインポートします

デフォルトのエクスポート {
  名前: 'アプリ'、
  コンポーネント: {
    ヘッダ、
    // フッター
  }
}
</script>

3. Vue.js のページには、spa vuejs で適切に表示するためにヘッダーとフッターを一緒に含める方法がわかりません。 このアプローチの何が問題なのでしょうか?

Answer 1

header と footer はネイティブ HTML 要素です。コンポーネントに名前を付けるには珍しい名前を使用する必要があります。たとえば、AppHeader と AppFooter# という名前を付けます。 ## そして次のように使用します: リーリー