Comment inclure les composants communs en-tête et pied de page dans SPA Vue.js

Question

Je crée un projet dans vuejs spa/J'ai créé un en-tête et un pied de page de composants communs que je souhaite inclure dans l'App.vue principale.

Je partage la structure de mon code ci-dessous :

2. Je partage mon fichier App.vue :

<template>

 <en-tête></en-tête>

</modèle>

<script>

importer l'en-tête depuis './components/Header.vue'
// importer le pied de page depuis 'components/Footer.vue'

exporter par défaut {
  nom : « Application »,
  Composants: {
    Entête,
    // Bas de page
  }
}
</script>

3. Aucune idée n'apparaît dans les pages de Vue.js sur la manière d'inclure l'en-tête et le pied de page ensemble pour bien les afficher dans spa Vuejs. Quel est le problème avec cette approche ? ≪/li>

Answer 1

header 和 footer 是原生 html 元素，您应该使用不常见的名称来命名组件，例如将它们命名为 AppHeader 和 AppFooter et utilisez-les comme ceci :

<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>