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

dan

Seterusnya, kami mentakrifkan templat komponen dalam fail header.vue dan footer.vue.

Kod dalam fail header.vue adalah seperti berikut:

<template>
  <div>
    <h1>Header</h1>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </nav>
  </div>
</template>

Dalam fail header.vue, kami mentakrifkan bar navigasi pengepala yang mengandungi tajuk dan tiga pautan navigasi.

Kod dalam fail footer.vue adalah seperti berikut:

<template>
  <div>
    <p>Copyright © 2021</p>
  </div>
</template>

Dalam fail footer.vue, kami mentakrifkan maklumat hak cipta.

Kini, kita boleh muat semula halaman untuk melihat kesannya. Jika semuanya disediakan dengan betul, kami akan melihat tapak web dengan bar navigasi kepala, kawasan kandungan utama dan maklumat hak cipta di bahagian bawah.

Ringkasan

Dalam pembangunan Vue.js, menggunakan templat adalah amalan biasa. Apabila kita perlu merujuk templat lain dalam templat, kita boleh menggunakan atribut nama teg untuk menentukan nama templat yang perlu dirujuk. Dalam fail templat utama, kita boleh menggunakan pernyataan import untuk memperkenalkan fail templat lain dan mendaftarkan komponen ini dalam atribut komponen. Dalam fail templat yang dirujuk, kami boleh menentukan templat kami sendiri.

Atas ialah kandungan terperinci Asas pembangunan VUE3: menggunakan templat Vue.js untuk merujuk templat lain. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!