Cara menggunakan komponen dalam komponen uniAPP

Dengan peningkatan pembangunan aplikasi mudah alih, semakin ramai pembangun mempunyai keperluan yang lebih tinggi untuk keserasian berbilang platform. Sebagai rangka kerja merentas platform berdasarkan Vue.js, uniAPP menyediakan banyak komponen berguna untuk menyokong keserasian berbilang platform.

Artikel ini akan memperkenalkan cara menggunakan komponen dalam komponen uniAPP.

1. Fahami komponen uniAPP

Sebelum kita mula menerangkan cara menggunakan komponen tersebut, kita perlu memahami konsep asas komponen uniAPP terlebih dahulu.

komponen uniAPP merujuk kepada elemen UI yang merangkumi paparan, gaya dan fungsi logik. Komponen ini boleh digunakan semula dengan mudah dalam aplikasi uniAPP dan serasi dengan pelbagai platform. Anda boleh membina komponen uniAPP dengan mencipta fail .vue.

2. Komponen uniAPP menggunakan komponen

Dalam uniAPP, satu komponen boleh menggunakan komponen lain menggunakan rujukan komponen. Iaitu, gunakan komponen anak dalam komponen induk. Mari lihat langkah-langkah khusus di bawah.

1. Buat subkomponen

Mula-mula kita perlu mencipta subkomponen. Kita boleh mencipta komponen dengan mencipta fail .vue baharu dalam folder komponen projek, seperti yang ditunjukkan di bawah:

<template>
  <view class="child-comp">
    <text>我是一个子组件</text>
  </view>
</template>

<script>
  export default {
    name: 'childComp'
  }
</script>

<style>
  .child-comp {
    background-color: #ddd;
    width: 100px;
    height: 100px;
  }
</style>

Subkomponen ini mengandungi teg paparan dan teg teks dan menetapkan beberapa Asas gaya.

2. Rujuk komponen anak dalam komponen induk

Seterusnya, kita perlu merujuk komponen anak dalam komponen induk. Dalam fail .vue komponen induk, kita perlu memperkenalkan komponen anak dahulu, dan kemudian gunakannya sebagai teg tersuai dalam bahagian templat, seperti yang ditunjukkan di bawah:

<template>
  <view>
    <childComp></childComp>
  </view>
</template>

<script>
  import childComp from '@/components/child-comp.vue'

  export default {
    components: {
      childComp
    },
  }
</script>

childComp yang diimport di sini merujuk kepada Komponen kanak-kanak yang baru kami buat. Daftarkannya dalam pilihan komponen supaya ia boleh dirujuk dalam templat. Dalam templat, kami terus menggunakan teg bukannya teg