Bermula dengan pembangunan VUE3: pemuatan dinamik dan pendaftaran menggunakan komponen

VUE3 pada masa ini merupakan salah satu rangka kerja bahagian hadapan yang paling popular Ia telah menarik lebih ramai pembangun dengan kemudahan penggunaan, fleksibiliti, pengoptimuman prestasi dan kelebihan lain. Dalam VUE3, menggunakan komponen adalah operasi yang sangat biasa, tetapi kerana projek besar mungkin memerlukan pemuatan dinamik dan pendaftaran komponen, dalam artikel ini kami akan memperkenalkan cara menggunakan komponen untuk memuatkan dan mendaftar secara dinamik.

Pertama, kita perlu memahami cara komponen didaftarkan dalam VUE3. Dalam VUE3, komponen boleh didaftarkan menggunakan literal objek atau menggunakan kaedah Vue.createApp. Berikut ialah contoh mudah komponen tersuai:

<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    props: {
      message: {
        type: String,
        required: true
      }
    }
  }
</script>

Komponen ini menerima sifat bernama "message", yang mestilah daripada jenis rentetan, jika tidak, ralat akan dilaporkan. Sekarang mari kita lihat cara memuatkan dan mendaftar komponen secara dinamik.

Pemuatan dinamik komponen

Pemuatan komponen dinamik bermakna apabila kami menjalankan aplikasi, komponen dimuatkan secara dinamik hanya apabila ia benar-benar diperlukan. Melakukannya boleh meningkatkan prestasi dan responsif aplikasi anda.

VUE3 menyediakan ciri komponen tak segerak Komponen boleh ditakrifkan sebagai komponen tak segerak dan kemudian dimuatkan apabila diperlukan. Berikut ialah contoh komponen tak segerak:

<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    props: {
      message: {
        type: String,
        required: true
      }
    }
  }
</script>

Apabila menggunakan komponen tak segerak, kita perlu mentakrifkan komponen itu sebagai fungsi tak segerak. Dalam fungsi ini, kita boleh menggunakan import() untuk memuatkan komponen secara tak segerak dan mengembalikan komponen selepas pemuatan selesai.

Berikut ialah contoh pendaftaran komponen tak segerak yang lebih lengkap:

<template>
  <div>
    <h1>Welcome to my app!</h1>
    <async-component :message="message" />
  </div>
</template>

<script>
  const AsyncComponent = () => ({
    // 加载异步组件
    component: import('./AsyncComponent.vue'),
    // 显示加载中
    loading: LoadingComponent,
    // 显示加载错误
    error: ErrorComponent,
    // 展示组件
    delay: 200,
    // 如果组件定义了名字，则可以直接使用这个字面量
    // name: 'my-component-name'
  })

  export default {
    components: {
      AsyncComponent
    },
    data() {
      return {
        message: 'Hello, world!'
      }
    }
  }
</script>

Dalam contoh ini, kami menggunakan kaedah pemuatan dinamik komponen tak segerak Vue, mula-mula tentukan komponen tak segerak, dan kemudian gunakannya dengan cara untuk memaparkannya dalam templat. Memandangkan AsyncComponent hanyalah fungsi, kita tidak perlu memuatkan komponen apabila komponen dimulakan, ia akan dimuatkan secara automatik apabila diperlukan.

Apabila mentakrifkan AsyncComponent, kita boleh menentukan fungsi dengan nilai pulangan janji sebagai sifat komponen komponen untuk memuatkan komponen secara tak segerak. Jika komponen memerlukan beberapa komponen pramuat, anda boleh menentukan nama komponen ini menggunakan pilihan pemuatan dan ralat. Selepas komponen berjaya dimuatkan, kita boleh menggunakan pilihan kelewatan untuk menentukan kelewatan sebelum komponen sebenar diberikan.

Pendaftaran komponen

Dalam VUE3, kami boleh mendaftar komponen menggunakan pendaftaran global atau pendaftaran tempatan. Perbezaan antara kedua-duanya ialah sama ada komponen itu didaftarkan sebagai global atau terhad kepada induk komponen tersebut.

Menggunakan pendaftaran global membolehkan komponen digunakan sepanjang keseluruhan aplikasi, manakala pendaftaran tempatan hanya boleh digunakan antara komponen induk dan komponen anak. Berikut ialah contoh komponen yang didaftarkan secara global dan komponen yang didaftarkan secara tempatan:

Komponen yang didaftarkan secara global

Cara untuk mendaftarkan komponen secara global ialah dengan memasang komponen ke dalam pilihan komponen objek Vue berikut ialah pendaftaran global Contoh komponen:

<template>
  <div>
    <my-component :message="message" />
  </div>
</template>

<script>
  import MyComponent from './MyComponent.vue'

  export default {
    components: {
      MyComponent
    },
    data() {
      return {
        message: 'Hello, world!'
      }
    }
  }
</script>

Dalam contoh ini, kami mengimport komponen MyComponent dan meletakkannya dalam pilihan komponen bagi contoh Vue, dan kemudian menggunakan komponen saya dalam templat untuk memaparkannya .

Komponen berdaftar tempatan

Komponen berdaftar tempatan hanya boleh digunakan dalam komponen semasa dan subkomponennya. Berikut ialah contoh pendaftaran komponen secara tempatan:

<template>
  <div>
    <my-component :message="message" />
  </div>
</template>

<script>
  import MyComponent from './MyComponent.vue'

  export default {
    components: {
      'my-component': MyComponent
    },
    data() {
      return {
        message: 'Hello, world!'
      }
    }
  }
</script>

Dalam contoh ini, kami mendaftarkan MyComponent sebagai komponen tempatan komponen semasa. Kami menetapkan nama komponen kepada "komponen saya" dalam sifat komponen dan kemudian memberikan contoh komponen sebagai nilai.

Ringkasan

Dalam artikel ini, kami mempelajari cara menggunakan komponen dalam VUE3 untuk memuatkan dan mendaftar komponen secara dinamik. Kami mencapai ini dengan menggunakan komponen tak segerak dan pendaftaran komponen global dan tempatan. Melalui teknologi ini, kami boleh mencapai prestasi dan fleksibiliti yang lebih baik dalam VUE3.

Atas ialah kandungan terperinci Bermula dengan pembangunan VUE3: pemuatan dinamik dan pendaftaran menggunakan komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!