Dalam applet pembangunan Uniapp, cara menulis komponen tersuai dan melaksanakan pemindahan nilai

Apabila kami membangunkan projek uni, kami sering menghadapi keperluan untuk menggunakan beberapa modul biasa, seperti tetingkap timbul dan satu set butang Jika ditulis berulang kali untuk setiap halaman, ia akan mengambil masa yang lama tidak kondusif. Penyelenggaraan dan pengurusan sistem, jadi perlu bagi kami untuk menulisnya sebagai modul umum untuk mencapai tujuan panggilan sewenang-wenangnya.

Semua komponen akan ditakrifkan dalam direktori komponen Jika tiada direktori sedemikian dalam projek baharu anda, anda juga boleh menciptanya sendiri Berikut ialah struktur komponen yang ditentukan (shopwind-multpicker):

components/
  shopwind-multpicker/
  shopwind-multpicker.js
shopwind-multpicker.vue
pages/
static/
App.vue

Setiap komponen ialah folder Selepas mentakrifkan komponen, kita boleh memanggilnya dalam paparan (vue). selesai paparan, maka bagaimanakah kita menghantar nilai komponen ke halaman induk? Kita boleh menggunakan kaedah ini.$emit dalam fail komponen (shopwind-multpicker.vue):

<shopwind-multpicker :title="title" idField="region_id" nameField="region_name" parentField="parent_id" :selected="selected" @confirm="confirm"></shopwind-multpicker>

Kemudian dalam halaman induk, Anda perlu mentakrifkan kaedah dengan nama yang sama dengan parameter pertama emit (di sini: sahkan) untuk menerima hasil pengembalian komponen perkataan Kaedah ini ditakrifkan dalam kaedah

// 组件的vue文件
this.$emit('confirm', '返回父页面的结果集')

. Ini melengkapkan halaman induk-anak Dalam contoh ini, komponen shopwind-multpicker digunakan ialah pemalam yang menyokong pautan tiga peringkat, seperti pautan serantau dan pautan kategori -pautan tahap mana-mana model Pemalam ini telah dikeluarkan ke pasaran pemalam Dcloud Terdapat Jika perlu, anda boleh memuat turun dan menggunakannya secara percuma dari pasaran pemalam:

Pakej universal tiga peringkat. pautan, yang boleh menyokong mana-mana model (seperti pautan serantau, pautan kategori) - Pasaran pemalam DCloud

// 父页面的vue文件
export default {
  data() {
    return {}
  },
  methods: {
    confirm(result) {
      // 这里可以获取您选择后返回的数据
      console.log(result)
    }
  }
}

Atas ialah kandungan terperinci Dalam applet pembangunan Uniapp, cara menulis komponen tersuai dan melaksanakan pemindahan nilai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!