Cara uniapp melaksanakan menggunakan komponen tersuai untuk mencapai penggunaan semula halaman

UniApp ialah rangka kerja pembangunan merentas platform berdasarkan Vue.js, yang boleh membangunkan aplikasi untuk berbilang platform secara serentak seperti program mini, H5 dan Aplikasi. Dalam UniApp, kami boleh menggunakan komponen tersuai untuk mencapai penggunaan semula halaman dan meningkatkan kecekapan pembangunan. Berikut akan memperkenalkan cara menggunakan komponen tersuai untuk mencapai penggunaan semula halaman dan memberikan contoh kod.

1 Buat komponen tersuai
Mula-mula, buat folder baharu di bawah direktori komponen projek UniApp, namakannya komponen tersuai dan buat folder baharu di bawah. folder ini Fail komponen Vue bernama CustomComponent.vue. Dalam fail CustomComponent.vue, tulis kod berikut: components 目录下新建一个文件夹，命名为 custom-component，并在该文件夹下新建一个 Vue 组件文件，命名为 CustomComponent.vue。在 CustomComponent.vue 文件中，编写如下代码：

<template>
  <view>
    <text>{{ message }}</text>
    <button @click="addCount">增加计数</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello UniApp',
      count: 0
    }
  },
  methods: {
    addCount() {
      this.count++
    }
  }
}
</script>

<style>
</style>

二、在页面中使用自定义组件
接下来，在需要复用的页面中引入自定义组件。在页面的 .vue 文件中，需要使用到自定义组件的地方，引入组件，然后在 components 属性中注册组件。例如，在 pages/index/index.vue 中，可按如下方式使用自定义组件：

<template>
  <view>
    <custom-component></custom-component>
    <custom-component></custom-component>
  </view>
</template>

<script>
import CustomComponent from '../../components/custom-component/CustomComponent.vue'

export default {
  components: {
    CustomComponent
  }
}
</script>

<style>
</style>

三、页面复用效果
在上面的示例中，我们在 index.vue 页面中使用了两个 CustomComponentrrreee

2. Gunakan komponen tersuai dalam halaman

Seterusnya, masukkan komponen tersuai ke dalam halaman yang perlu digunakan semula. Dalam fail .vue halaman, di mana anda perlu menggunakan komponen tersuai, memperkenalkan komponen dan kemudian mendaftarkan komponen dalam atribut components. Contohnya, dalam pages/index/index.vue, anda boleh menggunakan komponen tersuai seperti berikut:

rrreee

3 Kesan penggunaan semula halaman
Dalam contoh di atas, kami menggunakan index Two <code komponen>CustomComponent digunakan dalam halaman .vue. Apabila kami menjalankan projek, dua komponen tersuai akan dipaparkan pada halaman Fungsi dan gayanya adalah sama, tetapi datanya adalah bebas. Mengklik butang tambah kiraan salah satu komponen hanya akan meningkatkan pembilang dalam komponen itu dan tidak akan menjejaskan komponen lain.

Dengan menggunakan komponen tersuai, kami boleh mencapai penggunaan semula halaman. Jika terdapat berbilang halaman yang perlu menggunakan fungsi atau gaya yang sama, anda hanya perlu memperkenalkan komponen tersuai ke dalam halaman yang sepadan, yang sangat mengurangkan pertindihan penulisan kod.

🎜Ringkasan: 🎜Melalui langkah di atas, kita boleh menggunakan komponen tersuai untuk mencapai penggunaan semula halaman. Mula-mula, cipta komponen tersuai, perkenalkan dan daftarkannya dalam halaman di mana komponen itu perlu digunakan semula. Kemudian, letakkan komponen tersuai di tempat ia perlu digunakan semula. Dengan cara ini, kami boleh meningkatkan kebolehgunaan semula kod dan kecekapan pembangunan. 🎜🎜Saya harap kandungan di atas dapat membantu anda, dan saya doakan anda berjaya dalam pembangunan UniApp! 🎜

Atas ialah kandungan terperinci Cara uniapp melaksanakan menggunakan komponen tersuai untuk mencapai penggunaan semula halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!