So fügen Sie allgemeine Kopf- und Fußzeilenkomponenten in SPA Vue.js ein

Question

Ich erstelle ein Projekt in vuejs spa/Ich habe gemeinsame Kopf- und Fußzeilen für Komponenten erstellt, die ich in die Haupt-App.vue einbinden möchte.

Ich teile meine Codestruktur unten:

2. Ich teile meine Datei App.vue:

<template>

 <header></header>

</template>

<script>

Header aus „./components/Header.vue“ importieren
// Fußzeile aus „components/Footer.vue“ importieren

Standard exportieren {
  Name: 'App',
  Komponenten: {
    Header,
    // Fusszeile
  }
}
</script>

3. Auf Seiten in Vue.js erscheint keine Idee, wie Kopf- und Fußzeile zusammengefügt werden können, um in Spa-Vuejs gut angezeigt zu werden. Was ist an diesem Ansatz falsch?

Answer 1

header 和 footer 是原生 html 元素，您应该使用不常见的名称来命名组件，例如将它们命名为 AppHeader 和 AppFooter 并像这样使用它们：

<template>
  <AppHeader />
  <!-- other content-->
  <AppFooter /> 
</template>
<script>
  import {AppHeader} from './components/AppHeader.vue'
  import {AppFooter} from './components/AppFooter.vue'
  export default {
   name:'App',
   components:{ AppHeader, AppFooter}
 
  }
</script>