Asas pembangunan VUE3: menggunakan templat Vue.js untuk merujuk templat lain

Dalam pembangunan Vue.js, menggunakan templat adalah amalan yang sangat biasa. Apakah yang perlu kita lakukan apabila kita perlu merujuk templat lain dalam satu templat? Dalam artikel ini, kami akan memperkenalkan cara menggunakan templat Vue.js untuk merujuk templat lain.

Dalam Vue.js, kami boleh menggunakan teg Dalam fail templat, kita boleh mentakrifkan berbilang templat, setiap satu dengan namanya sendiri. Apabila kita perlu merujuk templat lain dalam templat, kita hanya perlu menggunakan atribut nama teg untuk menentukan nama templat yang perlu dirujuk.

Andaikan kita mempunyai dua fail templat, header.vue dan footer.vue. Fail header.vue mentakrifkan bar navigasi kepala tapak web dan fail footer.vue mentakrifkan maklumat hak cipta di bahagian bawah tapak web. Kami ingin merujuk kedua-dua fail templat ini dalam templat utama tapak web, apakah yang perlu kami lakukan?

Pertama, kita perlu merujuk kedua-dua fail templat ini dalam fail templat utama. Kedua-dua fail ini boleh diperkenalkan menggunakan pernyataan import:

<template>
  <div>
    <header></header>
    <router-view></router-view>
    <footer></footer>
  </div>
</template>

<script>
import Header from './header.vue'
import Footer from './footer.vue'

export default {
  name: 'MainTemplate',
  components: {
    Header,
    Footer
  }
}
</script>

Dalam kod di atas, kami menggunakan pernyataan import untuk memperkenalkan fail header.vue dan footer.vue, dan mendaftarkan kedua-dua komponen ini dalam atribut komponen. Dengan cara ini, kita boleh menggunakan teg