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>

코드 설명:

• 선택 태그를 사용하여 드롭다운 옵션 상자를 렌더링하고 v-model을 사용하여 현재 값을 바인딩합니다. option;
• 순회하려면 v-for를 사용합니다. 상위 구성 요소가 전달한 옵션은 옵션 목록을 동적으로 생성합니다.
• props를 사용하여 상위 구성 요소가 전달한 옵션과 값(현재 선택한 항목의 값)을 받습니다. data()를 통해 선택한 값을 초기화합니다.
• watch를 사용하여 선택한 값의 변경 사항을 모니터링하고 옵션이 변경되면 변경 이벤트를 내보내고 상위 구성 요소에 새 선택 값을 알립니다.

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>

코드 설명:

• 템플릿에서 두 개의 CitySelect 하위 구성 요소를 사용하여 지방 및 도시 선택 상자를 각각 렌더링하고 v-를 통해 현재 항목을 바인딩합니다. 모델 선택된 지방 및 도시
• 데이터 함수에서 지방 배열은 모든 지방을 저장하고 도시 객체는 모든 도시를 저장합니다. 현재 선택된 지방 및 도시를 기록합니다.
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>

코드 설명:

템플릿의 세 가지 RegionSelect 하위 구성 요소를 사용하여 각각 성, 시, 군의 선택 상자를 렌더링하고 v를 통해 바인딩합니다. -model 현재 선택된 지방, 도시 및 구역을 결정합니다.
• 데이터 함수에서 세 가지 개체 지방, 도시 및 구역을 정의합니다. 지방 배열은 모든 도시를 저장하고, 구역 개체는 모든 구역을 저장합니다. 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>

Summary

이 문서에서는 Vue 구성 요소를 사용하여 하위 구성 요소 및 상위 구성 요소 정의를 포함하여 다단계 연결 선택기를 구현하는 방법과 결합 프로세스를 소개합니다. 모든 하위 구성 요소. 이 예제를 통해 Vue 컴포넌트 개발의 기본 아이디어와 컴포넌트 간의 통신 메커니즘을 이해할 수 있습니다. 물론 비동기 데이터 수집, 하위 구성 요소 자체의 스타일 수정 등 실제 개발에서는 더 자세한 내용을 고려해야 합니다. 이러한 내용은 이 기사에서 다루지 않습니다.

위 내용은 Vue 구성요소 개발: 다중 레벨 연결 선택기 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!