Développement de composants Vue : implémentation d'un sélecteur de liaison multi-niveaux

Développement de composants Vue : implémentation d'un sélecteur de liens multi-niveaux

Dans le développement front-end, le sélecteur de liens multi-niveaux est une exigence courante, comme la sélection de la province et de la ville, la sélection de l'année, du mois et du jour, etc. Cet article expliquera comment utiliser les composants Vue pour implémenter des sélecteurs de liaison multi-niveaux, avec des exemples d'implémentation de code spécifiques.

Comment implémenter un sélecteur de liens multi-niveaux ?

Pour implémenter des sélecteurs de liaison multi-niveaux, vous devez utiliser l'idée de développement de composants de Vue, qui divise un grand sélecteur en plusieurs sous-composants, responsables du rendu de chaque niveau d'options. Chaque fois que la sélection de niveau change, les options des niveaux suivants doivent être mises à jour, ce qui nécessite l'utilisation d'un mécanisme de communication entre les composants Vue.

De plus, le sélecteur doit recevoir la valeur initiale de l'extérieur et envoyer des notifications d'événements à l'extérieur lorsque la sélection change. Ceci peut être réalisé en utilisant props et $emit.

Implémentons étape par étape ce composant de sélecteur de liaison à plusieurs niveaux.

Étape 1 : Définir les sous-composants

Nous définissons d'abord le sous-composant sélecteur pour chaque niveau. Voici le code d'un sous-composant simple du sélecteur de province :

<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>

Explication du code :

• Utilisez la balise select pour afficher la boîte d'options déroulante et utilisez v-model pour lier la valeur du courant option;
• Utilisez v-for pour parcourir Les options transmises par le composant parent génèrent dynamiquement la liste d'options;
• Utilisez des accessoires pour recevoir les options et la valeur (la valeur de l'élément actuellement sélectionné) transmises par le composant parent, et initialisez la valeur sélectionnée via data();
• Utilisez watch pour surveiller les changements dans la valeur sélectionnée, émettez un événement de changement lorsque l'option change, informant le composant parent de la nouvelle valeur de sélection.

Étape 2 : Définir le composant parent

Ensuite, nous définissons le composant parent du sélecteur de liaison multi-niveaux. Ce composant est responsable du rendu de tous les composants enfants et de la mise à jour des options des composants enfants suivants lorsque les options changent.

Ce qui suit est le code d'un simple sélecteur de liaison à deux niveaux :

<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>

Explication du code :

• Utilisez deux sous-composants CitySelect dans le modèle pour afficher respectivement les boîtes de sélection de province et de ville, et liez celle actuelle via v- modèle Provinces et villes sélectionnées ;
• Définissez deux tableaux, provinces et villes, dans la fonction de données. Le tableau provinces stocke toutes les provinces et l'objet villes stocke toutes les villes. Utilisez selectedProvince et selectedCity pour enregistrer les provinces et villes actuellement sélectionnées ;
Dans Watch, surveillez les changements dans la province sélectionnée et mettez à jour le tableau des villes lorsque la province change, ce qui est utilisé pour afficher la boîte de sélection de ville de niveau suivant.

Étape 3 : Combinez tous les sous-composants

Après avoir défini tous les sous-composants et composants parents, il nous suffit de combiner tous les sous-composants pour former un sélecteur de liaison multi-niveaux complet.

Ce qui suit est le code d'un simple sélecteur de liaison à trois niveaux :

<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>

Explication du code :

Utilisez trois sous-composants RegionSelect dans le modèle pour afficher les zones de sélection des provinces, des villes et des districts respectivement, et liez-les via v -model Déterminez les provinces, villes et districts actuellement sélectionnés ;
• Définissez trois objets provinces, villes et districts dans la fonction de données. Le tableau provinces stocke toutes les provinces, l'objet villes stocke toutes les villes et l'objet districts stocke tous les districts. selectedProvince, selectedCity et selectedDistrict enregistrent la province, la ville et le district actuellement sélectionnés ;
• Surveillez les changements dans selectedProvince et selectedCity dans watch, et mettez à jour les options et les valeurs sélectionnées des zones de sélection suivantes lorsque la province ou la ville change.

Le sélecteur de liaison à trois niveaux est terminé ! Vous pouvez référencer le composant dans le modèle de composant Vue, comme indiqué ci-dessous :

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

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

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

Résumé

Cet article explique comment utiliser les composants Vue pour implémenter des sélecteurs de liaison à plusieurs niveaux, y compris la définition des composants enfants et des composants parents, ainsi que le processus de combinaison. tous les composants enfants. Grâce à cet exemple, nous pouvons comprendre les idées de base du développement des composants Vue et le mécanisme de communication entre les composants. Bien entendu, plus de détails doivent être pris en compte dans le développement réel, comme l'acquisition de données asynchrone, la modification du style du sous-composant lui-même, etc. Ces contenus ne sont pas couverts dans cet article.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!