Pembangunan komponen Vue: pelaksanaan pemilih pautan berbilang peringkat

Pembangunan komponen Vue: pelaksanaan pemilih pautan berbilang peringkat

Dalam pembangunan hadapan, pemilih pautan berbilang peringkat ialah keperluan biasa, seperti pemilihan wilayah dan bandar, pemilihan tahun, bulan dan hari, dsb. Artikel ini akan memperkenalkan cara menggunakan komponen Vue untuk melaksanakan pemilih pautan berbilang peringkat, dengan contoh pelaksanaan kod khusus.

Bagaimana untuk melaksanakan pemilih pautan berbilang peringkat?

Untuk melaksanakan pemilih pautan berbilang peringkat, anda perlu menggunakan idea pembangunan komponen Vue, membahagikan pemilih besar kepada beberapa subkomponen, yang bertanggungjawab untuk memberikan setiap peringkat pilihan. Setiap kali pemilihan tahap berubah, pilihan tahap berikutnya mesti dikemas kini, yang memerlukan penggunaan mekanisme komunikasi antara komponen Vue.

Selain itu, pemilih perlu menerima nilai awal dari luar dan menghantar pemberitahuan acara ke luar apabila pemilihan berubah. Ini boleh dicapai menggunakan props dan $emit.

Mari laksanakan komponen pemilih pautan berbilang peringkat ini langkah demi langkah.

Langkah 1: Tentukan subkomponen

Kami mula-mula mentakrifkan subkomponen pemilih untuk setiap peringkat. Berikut ialah kod untuk subkomponen ringkas pemilih wilayah:

<template>
  <select v-model="selected">
    <option value="">请选择</option>
    <option v-for="item in options" :value="item">{{ item }}</option>
  </select>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selected: this.value
    }
  },
  watch: {
    selected(newValue) {
      this.$emit('change', newValue)
    }
  }
}
</script>

Penjelasan kod:

• Gunakan teg pilih untuk memaparkan kotak pilihan lungsur turun, dan gunakan model v untuk mengikat nilai semasa pilihan;
• Gunakan v-untuk untuk melintasi Pilihan yang dihantar oleh komponen induk menjana senarai pilihan secara dinamik
• Gunakan prop untuk menerima pilihan dan nilai (nilai item yang dipilih pada masa ini) yang dihantar oleh komponen induk, dan mulakan nilai yang dipilih melalui data();
• Gunakan jam tangan untuk memantau perubahan dalam nilai yang dipilih, mengeluarkan peristiwa perubahan apabila pilihan berubah, memberitahu komponen induk nilai pemilihan baharu.

Langkah 2: Tentukan komponen induk

Seterusnya, kami menentukan komponen induk bagi pemilih pautan berbilang peringkat. Komponen ini bertanggungjawab untuk memberikan semua komponen anak dan mengemas kini pilihan komponen anak berikutnya apabila pilihan berubah.

Berikut ialah kod untuk pemilih pautan dua peringkat mudah:

<template>
  <div>
    <CitySelect :options="provinces" v-model="selectedProvince"/>
    <CitySelect :options="cities" v-model="selectedCity"/>
  </div>
</template>

<script>
import CitySelect from './CitySelect.vue'

export default {
  components: {
    CitySelect
  },
  data() {
    return {
      provinces: ['广东', '江苏', '浙江'],
      cities: {
        '广东': ['广州', '深圳'],
        '江苏': ['南京', '苏州'],
        '浙江': ['杭州', '宁波']
      },
      selectedProvince: '',
      selectedCity: ''
    }
  },
  watch: {
    selectedProvince(newValue) {
      this.selectedCity = ''
      if (newValue) {
        this.cities = this.$data.cities[newValue]
      } else {
        this.cities = []
      }
    }
  }
}
</script>

Penjelasan kod:

• Gunakan dua subkomponen CitySelect dalam templat untuk memaparkan kotak pilihan wilayah dan bandar masing-masing, dan ikat yang semasa melalui v- model Wilayah dan bandar terpilih
• Takrifkan dua tatasusunan, wilayah dan bandar, dalam fungsi data Tatasusunan wilayah menyimpan semua wilayah, dan objek bandar menggunakan Wilayah dan Bandar terpilih untuk merekod wilayah dan bandar yang dipilih
Dalam tontonan Pantau perubahan di Wilayah terpilih, dan kemas kini tatasusunan bandar apabila wilayah berubah, yang digunakan untuk memaparkan kotak pemilihan bandar peringkat seterusnya.

Langkah 3: Gabungkan semua subkomponen

Selepas kami menentukan semua subkomponen dan komponen induk, kami hanya perlu menggabungkan semua subkomponen untuk membentuk pemilih pautan berbilang peringkat yang lengkap.

Berikut ialah kod pemilih pautan tiga peringkat mudah:

<template>
  <div>
    <RegionSelect :options="provinces" v-model="selectedProvince"/>
    <RegionSelect :options="cities" v-model="selectedCity"/>
    <RegionSelect :options="districts" v-model="selectedDistrict"/>
  </div>
</template>

<script>
import RegionSelect from './RegionSelect.vue'

export default {
  components: {
    RegionSelect
  },
  data() {
    return {
      provinces: ['广东', '江苏', '浙江'],
      cities: {
        '广东': ['广州', '深圳'],
        '江苏': ['南京', '苏州'],
        '浙江': ['杭州', '宁波']
      },
      districts: {
        '广州': ['天河区', '海珠区'],
        '深圳': ['福田区', '南山区'],
        '南京': ['玄武区', '鼓楼区'],
        '苏州': ['姑苏区', '相城区'],
        '杭州': ['上城区', '下城区'],
        '宁波': ['江东区', '江北区']
      },
      selectedProvince: '',
      selectedCity: '',
      selectedDistrict: ''
    }
  },
  watch: {
    selectedProvince(newValue) {
      if (newValue) {
        this.cities = this.$data.cities[newValue]
        this.selectedCity = ''
        this.districts = []
      } else {
        this.cities = []
        this.districts = []
      }
    },
    selectedCity(newValue) {
      if (newValue) {
        this.districts = this.$data.districts[newValue]
        this.selectedDistrict = ''
      } else {
        this.districts = []
      }
    }
  }
}
</script>

Penjelasan kod:

Gunakan tiga subkomponen RegionSelect dalam templat untuk memaparkan kotak pilihan wilayah, bandar dan daerah masing-masing, dan mengikatnya melalui v -model Tentukan wilayah, bandar dan daerah yang dipilih pada masa ini; selectedProvince, selectedCity and selectedDistrict merekodkan wilayah, bandar dan daerah yang dipilih pada masa ini
• Pantau perubahan dalamProvince dan selectedCity dalam tontonan, dan kemas kini pilihan dan nilai pilihan kotak pilihan berikutnya apabila wilayah atau bandar berubah.
• Pemilih pautan tiga peringkat telah selesai! Anda boleh merujuk komponen dalam templat komponen Vue, seperti yang ditunjukkan di bawah:

<template>
  <div>
    <RegionSelect v-model="selectedRegion"/>
  </div>
</template>

<script>
import RegionSelect from './RegionSelect.vue'

export default {
  components: {
    RegionSelect
  },
  data() {
    return {
      selectedRegion: ['广东', '深圳', '南山区']
    }
  }
}
</script>

Ringkasan

Artikel ini memperkenalkan cara menggunakan komponen Vue untuk melaksanakan pemilih pautan berbilang peringkat, termasuk menentukan komponen anak dan komponen induk, dan proses penggabungan semua komponen kanak-kanak. Melalui contoh ini, kita dapat memahami idea asas pembangunan komponen Vue dan mekanisme komunikasi antara komponen. Sudah tentu, butiran lanjut perlu dipertimbangkan dalam pembangunan sebenar, seperti pemerolehan data tak segerak, mengubah suai gaya subkomponen itu sendiri, dll. Kandungan ini tidak diliputi dalam artikel ini.

Atas ialah kandungan terperinci Pembangunan komponen Vue: pelaksanaan pemilih pautan berbilang peringkat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!