Bagaimana untuk merujuk komponen terkapsul dalam vue

Dengan pembangunan berterusan rangka kerja bahagian hadapan, semakin ramai pembangun mula menggunakan Vue.js untuk membina aplikasi web. Dalam Vue.js, komponen ialah salah satu konsep teras untuk membina aplikasi web. Komponen Vue.js menjadikan kod lebih modular, boleh digunakan semula, lebih mudah diselenggara dan lebih mudah untuk diuji. Komponen pengekapan ialah salah satu ciri penting Vue.js Ia boleh merangkum kod yang boleh digunakan semula dan menyatakan ke dalam modul yang berasingan, yang dipanggil komponen, supaya ia boleh digunakan semula dalam bahagian program yang berbeza. Artikel ini menerangkan cara merujuk komponen terkapsul.

1. Buat komponen

Pertama, kita perlu mencipta komponen Vue. Sebelum mencipta komponen, kita perlu menentukan nama komponen, sifat, kaedah, dll. Dalam artikel ini, kami mengambil komponen butang mudah sebagai contoh untuk menunjukkan cara merujuk komponen berkapsul. Komponen butang ini mempunyai dua sifat: btnClass dan btnText digunakan untuk menentukan nama kelas butang, dan btnText digunakan untuk menentukan kandungan teks butang. Berikut ialah kod sampel untuk komponen butang:

<template>
  <button :class="btnClass">{{ btnText }}</button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    btnClass: {
      type: String,
      default: '',
    },
    btnText: {
      type: String,
      default: '',
    },
  },
};
</script>

2. Daftar komponen sebagai komponen global

Untuk menggunakan komponen di mana-mana dalam aplikasi, kita perlu mendaftarkan komponen itu adalah komponen global. Dengan cara ini komponen boleh dirujuk di mana-mana sahaja. Dalam fail yang perlu menggunakan komponen, hanya gunakan nama komponen dalam templat. Untuk mendaftarkan komponen sebagai komponen global hanya gunakan kaedah Vue.component(). Berikut ialah contoh kod:

import Vue from 'vue';
import MyButton from './components/MyButton.vue';

Vue.component('MyButton', MyButton);

Apabila mendaftar komponen, kita perlu mengisytiharkan nama komponen dan laluan ke fail komponen.

3. Daftar komponen sebagai komponen tempatan

Tidak seperti komponen global, komponen tempatan hanya boleh digunakan di lokasi berdaftar dan subkomponennya. Pendekatan ini sesuai apabila anda perlu menggunakan komponen yang sama dalam berbilang komponen anak dengan komponen induk yang sama. Dalam kod contoh berikut, kami mendaftarkan komponen sebagai komponen tempatan:

<template>
  <div>
    <MyButton btnClass="primary" btnText="Click me"></MyButton>
  </div>
</template>

<script>
import MyButton from './MyButton.vue';

export default {
  name: 'MyView',
  components: { MyButton },
};
</script>

Apabila mendaftar komponen tempatan, anda perlu mengisytiharkan komponen dalam pilihan komponen komponen di mana komponen itu didaftarkan.

4. Memperkenalkan komponen luaran

Kami meletakkan fail komponen dalam direktori komponen, dan kemudian memperkenalkan komponen dalam fail yang perlu menggunakan komponen (seperti App. vue). Apabila kita perlu menggunakan komponen ini, kita hanya menggunakannya dalam templat. Seperti yang ditunjukkan di bawah:

import MyButton from './components/MyButton.vue';

export default {
  name: 'App',
  components: {
    MyButton,
  },
};

Sudah tentu terdapat cara lain untuk merujuk komponen, seperti memuatkan komponen secara dinamik menggunakan fungsi import() atau menambah komponen menggunakan kaedah Vue.component() dsb. Pilih kaedah yang paling sesuai mengikut situasi sebenar.

Ringkasan

Vue.js ialah rangka kerja bahagian hadapan yang berkuasa, dan sistem komponennya ialah salah satu konsep teras untuk membina aplikasi web. Komponen terkapsul Vue.js boleh menjadikan kod lebih modular, boleh digunakan semula, lebih mudah diselenggara dan diuji. Untuk merujuk komponen dalam aplikasi, kita perlu mendaftarkan nama untuk komponen dan kemudian memperkenalkannya dalam fail yang perlu menggunakan komponen tersebut. Jadikan kod kami lebih modular dan boleh digunakan semula, dengan itu mengurangkan lebihan kod. Saya harap artikel ini membantu dan menjadikan anda lebih mahir dalam menggunakan komponen Vue.js.

Atas ialah kandungan terperinci Bagaimana untuk merujuk komponen terkapsul dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!