Vue コンポーネント開発: マルチレベル リンケージ セレクターの実装

Vue コンポーネント開発: マルチレベル リンケージ セレクターの実装

フロントエンド開発では、州や都市の選択など、マルチレベル リンケージ セレクターが一般的な要件です。 、年、月、日の選択など。この記事では、Vue コンポーネントを使用してマルチレベル リンケージ セレクターを実装する方法を、具体的なコード実装例とともに紹介します。

マルチレベルリンケージセレクターを実装するにはどうすればよいですか?

マルチレベル リンケージ セレクターを実装するには、Vue のコンポーネント開発アイデアを使用して、大きなセレクターを複数のサブコンポーネントに分割し、各レベルのオプションのレンダリングを担当する必要があります。レベルの選択が変更されるたびに、後続のレベルのオプションを更新する必要があり、そのためには Vue コンポーネント間の通信メカニズムを使用する必要があります。

また、セレクターは外部から初期値を受け取り、選択が変化したときに外部にイベント通知を送信する必要があります。これは、props と $emit を使用して実現できます。

このマルチレベル リンケージ セレクター コンポーネントを段階的に実装してみましょう。

ステップ 1: サブコンポーネントの定義

まず、各レベルのセレクター サブコンポーネントを定義します。以下は、州セレクターの単純なサブコンポーネントのコードです:

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

コードの説明:

• select タグを使用してドロップダウン オプション ボックスをレンダリングし、v-モデルを使用して現在のオプションの値をバインドし、data() を通じて選択した値を初期化します;
• 監視を使用して選択した値の変更を監視し、オプションが変更されたときに変更イベントを送信し、親コンポーネントに通知します新しく選択された値の値。
ステップ 2: 親コンポーネントを定義する
次に、マルチレベル リンケージ セレクターの親コンポーネントを定義します。このコンポーネントは、すべての子コンポーネントをレンダリングし、オプションが変更されたときに後続の子コンポーネントのオプションを更新する役割を果たします。

次は、単純な 2 レベルのリンケージ セレクターのコードです:

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

コードの説明:

テンプレートで 2 つの CitySelect サブコンポーネントを使用し、それらを個別にレンダリングします。 . 州と市の選択ボックスは、v-model を通じて現在選択されている州と市をバインドします。

データ関数で 2 つの配列、州と市を定義します。州の配列にはすべての州が格納され、市のオブジェクトには格納されます。すべての都市では、selectedProvince と selectedCity を使用して、現在選択されている州と都市を記録します。

• ウォッチで selectedProvince の変更を監視し、州が変更されたときに次のレベルの都市をレンダリングするために使用される都市配列を更新します。選択ボックス。
ステップ 3: すべてのサブコンポーネントを結合する
すべてのサブコンポーネントと親コンポーネントを定義したら、すべてのサブコンポーネントを結合して完全なマルチコンポーネントを形成するだけです。 -レベルのリンケージセレクター。

次は、単純な 3 レベルのリンケージ セレクターのコードです:

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

コードの説明:

テンプレートで 3 つの RegionalSelect サブコンポーネントを使用し、それらを個別にレンダリングします。州、市、および地区の選択ボックスは、v-model を通じて現在選択されている州、市、および地区にバインドされています。

データ関数で 3 つのオブジェクトである州、市、地区を定義し、州配列ストアを定義します。 all states 、city オブジェクトにはすべての都市が格納され、districts オブジェクトにはすべての地区が格納されます。現在選択されている州、都市、および地区を記録するには、 selectedProvince、selectedCity、および selectedDistrict を使用します。

• selectedProvince と selectedCity の変更を監視します。州または都市が変更されると、それ以降の選択ボックスのオプションと選択値が更新されます。
3段階のリンケージセレクターが完成しました！以下に示すように、Vue コンポーネント テンプレートでコンポーネントを参照できます。

• <template>
    <div>
      <RegionSelect v-model="selectedRegion"/>
    </div>
  </template>
  
  <script>
  import RegionSelect from './RegionSelect.vue'
  
  export default {
    components: {
      RegionSelect
    },
    data() {
      return {
        selectedRegion: ['广东', '深圳', '南山区']
      }
    }
  }
  </script>

  概要

  この記事では、Vue コンポーネントを使用してマルチレベル リンケージ セレクターを実装する方法を紹介します。親コンポーネント 、およびすべてのサブコンポーネントを組み合わせるプロセス。この例を通じて、Vue コンポーネント開発の基本的な考え方とコンポーネント間の通信メカニズムを理解することができます。もちろん、実際の開発では、非同期データの取得やサブコンポーネント自体のスタイルの変更など、より詳細な検討が必要になります。これらの内容については、この記事では扱いません。

  以上がVue コンポーネント開発: マルチレベル リンケージ セレクターの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。