Cara merujuk komponen terbina dalam dalam uniapp

Sebagai rangka kerja pembangunan merentas platform, Uni-app mempunyai perpustakaan komponen yang sangat kaya dan komponen terbina dalam merupakan bahagian penting daripadanya. Komponen terbina dalam sangat boleh digunakan semula dan mudah digunakan, dan merupakan enkapsulasi beberapa fungsi yang biasa digunakan, seperti butang, kotak input, senarai, dsb. Semasa pembangunan, anda boleh melaksanakan fungsi biasa ini dengan cepat dengan merujuk komponen terbina dalam dan meningkatkan kecekapan pembangunan. Artikel ini akan memperkenalkan cara Uni-app merujuk komponen terbina dalam.

1. Tambah komponen terbina dalam dalam fail pages.json
   Dalam fail konfigurasi halaman pages.json Uni-app, terdapat item konfigurasi global "usingComponents". Item konfigurasi ini boleh digunakan untuk merujuk pustaka komponen terbina dalam yang digunakan oleh projek. Kita boleh menambah laluan komponen terbina dalam yang perlu kita gunakan di sini Laluan itu boleh menjadi laluan relatif atau laluan mutlak.

Sebagai contoh, untuk merujuk komponen ikon dalam perpustakaan ikon uni-icon dalam halaman, anda perlu menambah kod berikut pada fail pages.json:

"usingComponents": {
  "uni-icons": "@/uni-icons/uni-icons.vue"
}

Di mana, "uni -icons" ialah nama komponen tersuai, yang boleh dipilih secara santai "@/" mewakili direktori akar projek. Di sini, komponen uni-icons diletakkan dalam folder uni-icons dalam direktori akar projek.

2. Rujuk komponen terbina dalam dalam halaman
   Untuk menggunakan komponen terbina dalam dalam halaman, anda hanya perlu menulis nama komponen tersuai dalam teg.

Mengambil komponen ikon dalam perpustakaan ikon uni-ikon sebagai contoh, kodnya adalah seperti berikut:

<template>
    <view class="icon-container">
        <uni-icons type="add"></uni-icons>
        <uni-icons type="attention"></uni-icons>
        <uni-icons type="settings"></uni-icons>
    </view>
</template>

Antaranya, atribut jenis digunakan untuk menentukan ikon untuk dipaparkan. Contohnya, type="add" bermaksud memaparkan ikon tambah. Dengan cara ini, pembangun boleh melaksanakan penggunaan beberapa komponen biasa dengan mudah. Pustaka komponen terbina dalam menyepadukan banyak komponen asas biasa, seperti butang, kotak input, pemilih, dsb., untuk memenuhi keperluan asas pembangun.

3. Sesuaikan komponen terbina dalam
   Jika komponen yang anda inginkan tiada dalam pustaka komponen terbina dalam, anda juga boleh menyesuaikan komponen terbina dalam. Komponen terbina dalam tersuai pada dasarnya ditakrifkan dengan cara yang sama seperti komponen biasa, dan ia boleh dirujuk dengan cara di atas. Perlu diingat bahawa apabila menyesuaikan komponen, anda mesti mengikut spesifikasi pembangunan komponen dalam Uni-app.

Berikut ialah contoh komponen terbina dalam tersuai biasa:

<template>
  <view class="uni-badge" :class="{&#39;uni-badge--dot&#39;:dot}" v-if="show">
    <slot></slot>
  </view>
</template>

<script>
export default {
    name: 'uni-badge',
    props: {
    dot: {
      type: Boolean,
      default: false
    },
    show: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style scoped>
.uni-badge {
  display: inline-block;
  font-size: 24rpx;
  line-height: 40rpx;
  color: #fff;
  background-color: #f5222d;
  border-radius: 20rpx;
  text-align: center;
  width: 40rpx;
  height: 40rpx;
}
.uni-badge--dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 6rpx;
  line-height: 0;
  font-size: 0;
  margin-left: 20rpx;
}
</style>

Kod di atas mentakrifkan komponen bernama uni-badge. Fungsi utama komponen adalah untuk memaparkan label dengan skor atau markah, di mana skor boleh menjadi sebarang nombor dan tanda boleh menjadi titik merah atau grafik lain.

Apabila menyesuaikan komponen terbina dalam, anda perlu menulis kod mengikut spesifikasi komponen Uni-app. Kaedah rujukan komponen juga seperti yang dinyatakan di atas.

Ringkasan
Melalui pengenalan artikel ini, kami telah mempelajari cara rujukan Uni-app komponen terbina dalam ia boleh menggunakan komponen terbina dalam dengan mudah, memendekkan masa pembangunan dan juga menyesuaikan komponen terbina dalam sesuai dengan keperluan perniagaan. Semasa pembangunan, pembangun boleh menggunakan komponen terbina dalam secara fleksibel mengikut keperluan mereka sendiri untuk meningkatkan kecekapan pembangunan dan melaksanakan aplikasi yang lebih berkuasa.

Atas ialah kandungan terperinci Cara merujuk komponen terbina dalam dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!