Tutorial Bermula VUE3: Menggunakan pemalam Vue.js untuk merangkum komponen pemilih rantau

Tutorial Bermula VUE3: Gunakan pemalam Vue.js untuk merangkum komponen pemilih rantau

Vue.js ialah rangka kerja JavaScript popular yang boleh membantu pembangun membina berprestasi tinggi, fleksibel dan mudah- untuk menyelenggara program web. Versi terbaru Vue.js, Vue3, membawakan banyak ciri dan penambahbaikan baharu, salah satu penambahbaikan penting ialah sistem komponennya. Komponen ialah teras Vue.js, yang boleh membantu pembangun mencapai penggunaan semula kod yang cekap dan meningkatkan kecekapan pembangunan. Pemalam Vue.js ialah pakej kod boleh guna semula yang merangkum fungsi yang biasa digunakan ke dalam komponen boleh pasang.

Dalam artikel ini, kami akan menggunakan pemalam Vue.js untuk merangkum komponen pemilih rantau. Komponen ini membolehkan pengguna memilih wilayah/bandar/daerah/daerah dengan mudah. Kami akan menyediakan kod lengkap supaya pembangun boleh menyepadukan komponen ini dengan mudah ke dalam aplikasi mereka.

Langkah 1: Buat pemalam Vue.js

Pertama, kita perlu mencipta pemalam Vue.js. Pemalam Vue.js ialah pakej kod boleh guna semula yang boleh mengandungi sebarang kod boleh guna semula seperti komponen global, arahan atau pengadun. Pemalam sering digunakan untuk merangkum fungsi yang biasa digunakan ke dalam komponen boleh pasang. Pemalam Vue.js mempunyai dua bahagian: objek pemalam dan fungsi pemasangan. Objek pemalam ialah objek JavaScript yang mengandungi komponen global, arahan atau pengadun fungsi pemasangan ialah fungsi JavaScript yang menerima tika Vue.js sebagai parameter dan mendaftarkan objek pemalam pada tika.

Berikut ialah kod pemalam Vue.js yang kami buat:

// Define a plugin object
const AreaPickerPlugin = {
    install(app) {
        // Define a global component
        app.component('area-picker', {
            // Add component options
        })
    }
}

// Export the plugin object
export default AreaPickerPlugin

Langkah 2: Tentukan komponen pemilih rantau

Seterusnya, kami akan mentakrifkan gaya komponen pemilih rantau dan logik interaksi. Komponen ini akan merangkumi empat kotak drop-down, masing-masing sepadan dengan wilayah/bandar/daerah/daerah Pengguna boleh memilih wilayah yang sepadan melalui kotak drop-down ini.

Berikut ialah kod komponen pemilih wilayah yang kami takrifkan:

<template>
  <div class="area-picker">
    <select v-model="selectedProvince" @change="provinceChanged">
      <option value="">请选择省份</option>
      <option v-for="province in provinces" :value="province">{{ province.name }}</option>
    </select>
    <select v-model="selectedCity" @change="cityChanged" :disabled="!cities.length">
      <option value="">请选择城市</option>
      <option v-for="city in cities" :value="city">{{ city.name }}</option>
    </select>
    <select v-model="selectedArea" @change="areaChanged" :disabled="!areas.length">
      <option value="">请选择区县</option>
      <option v-for="area in areas" :value="area">{{ area.name }}</option>
    </select>
    <select v-model="selectedStreet" :disabled="!streets.length">
      <option value="">请选择乡镇街道</option>
      <option v-for="street in streets" :value="street">{{ street.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      selectedArea: '',
      selectedStreet: '',
      provinces: [],
      cities: [],
      areas: [],
      streets: [],
    }
  },
  methods: {
    provinceChanged() {
      // Update cities
      // Reset areas, streets
    },
    cityChanged() {
      // Update areas
      // Reset streets
    },
    areaChanged() {
      // Update streets
    },
    loadData() {
      // Load data from API
    }
  },
  mounted() {
    this.loadData();
  }
};
</script>

<style>
.area-picker {
  display: flex;
  flex-wrap: wrap;
}

select {
  margin-right: 10px;
}
</style>

Dalam komponen ini, kami menggunakan data responsif Vue.js untuk menjejak wilayah/bandar/daerah/ yang dipilih oleh pengguna daerah. Apabila pengguna memilih wilayah, kami akan mengemas kini senarai bandar apabila pengguna memilih bandar, kami akan mengemas kini senarai daerah dan daerah apabila pengguna memilih daerah atau daerah, kami akan mengemas kini senarai perbandaran dan jalan. Kami juga mentakrifkan kaedah loadData() yang memuatkan data daripada API supaya kami boleh mengisi senarai wilayah/bandar/daerah/daerah.

Langkah 3: Daftarkan komponen pemilih wilayah sebagai pemalam

Akhir sekali, dalam fungsi pemasangan pemalam, kami akan mendaftarkan komponen pemilih wilayah sebagai komponen global.

Berikut ialah kod kami untuk mendaftarkan komponen pemilih rantau:

import AreaPicker from './AreaPicker.vue';

const AreaPickerPlugin = {
  // Define the install function
  install(app) {
    // Register the global component
    app.component('area-picker', AreaPicker);
  }
};

export default AreaPickerPlugin;

Sekarang kami telah mencipta komponen Vue.js dan merangkumkannya dalam pemalam, mari lihat cara Kami menggunakannya dalam permohonan.

Langkah 4: Gunakan komponen pemilih rantau

Menggunakan komponen pemilih rantau adalah mudah. Kami hanya perlu mengimport pemalam Vue.js yang baru kami buat dan menggunakannya pada contoh Vue.js.

Berikut ialah kod untuk menggunakan komponen pemilih rantau:

<template>
  <div>
    <area-picker />
  </div>
</template>

<script>
import AreaPickerPlugin from './plugins/AreaPickerPlugin';

export default {
  // Install the plugin
  created() {
    this.$use(AreaPickerPlugin);
  },
};
</script>

Dalam contoh ini, kami membawa masuk pemalam yang baru kami buat dan menggunakannya pada tika Vue.js. Kami hanya perlu menambah komponen pemilih kawasan dalam templat untuk menggunakan komponen pemilih kawasan dalam aplikasi kami.

Kesimpulan

Dalam artikel ini, kami mempelajari cara menggunakan pemalam Vue.js untuk merangkum komponen pemilih rantau. Kami mencapai fungsi ini dengan mencipta pemalam Vue.js, mentakrifkan komponen pemilih rantau, mendaftarkan komponen pemilih wilayah sebagai pemalam, dan kemudian menggunakannya dalam aplikasi kami. Contoh ini menggambarkan kuasa pemalam Vue.js, yang membolehkan kami merangkum mana-mana fungsi yang biasa digunakan ke dalam pakej kod boleh guna semula supaya pembangun lain boleh menyepadukan dengan mudah ke dalam aplikasi mereka.

Atas ialah kandungan terperinci Tutorial Bermula VUE3: Menggunakan pemalam Vue.js untuk merangkum komponen pemilih rantau. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!