Cara memasukkan komponen biasa Pengepala dan Pengaki dalam SPA Vue.js

Question

Saya sedang mencipta projek dalam vuejs spa/Saya telah mencipta pengepala dan pengaki komponen biasa yang saya ingin sertakan dalam App.vue utama.

Saya berkongsi struktur kod saya di bawah:

2. Saya berkongsi fail saya App.vue:

<template>

 <header></header>

</template>

<skrip>

import Header daripada './components/Header.vue'
// import Footer daripada 'components/Footer.vue'

eksport lalai {
  nama: 'App',
  komponen: {
    Kepala,
    // Pengaki
  }
}
</script>

3. Tiada idea muncul dalam halaman dalam Vue.js cara memasukkan pengepala dan pengaki bersama-sama untuk dipaparkan dengan baik dalam vuejs spa. Apa yang salah dengan pendekatan ini?

Answer 1

header 和 footer 是原生 html 元素，您应该使用不常见的名称来命名组件，例如将它们命名为 AppHeader 和 AppFooter dan gunakannya seperti ini:

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