Vue 实现城市三级联动选择器：思路与代码示例

本文将详细介绍使用 Vue 实现城市三级联动选择器的方法，包括数据结构定义、组件设计、交互逻辑实现和父组件整合等步骤。同时提供代码示例，帮助开发者快速理解并应用。

需求分析

实现城市三级联动选择器，通常需要用户依次选择省份、城市和区/县，并在选择过程中动态更新后续选项。这在很多场景中都非常实用，例如用户注册、地址填写等。

实现思路

定义数据结构

三级联动需要定义三个数据结构，分别表示省、市、区/县。可以使用对象或数组表示，例如：

// 省份数据
const provinces = [
  {id: 1, name: '北京'},
  {id: 2, name: '上海'},
  ...
];

// 城市数据
const cities = [
  {id: 1, name: '北京', provinceId: 1},
  {id: 2, name: '上海', provinceId: 2},
  {id: 3, name: '深圳', provinceId: 3},
  ...
];

// 区/县数据
const districts = [
  {id: 1, name: '东城区', cityId: 1},
  {id: 2, name: '西城区', cityId: 1},
  {id: 3, name: '黄浦区', cityId: 2},
  ...
];

定义组件

可以使用三个组件分别表示省、市、区/县。每个组件有一个 props 接受对应的数据，一个选中值的 data，一个 emit 事件表示选中值的变化。
实现交互逻辑
- 省份组件渲染省份数据，并监听选中值变化事件，当选中值变化时，触发 emit 事件通知父组件。
- 市组件监听父组件传入的省份 id 值，并根据省份 id 过滤出对应的城市数据，渲染城市数据，并监听选中值变化事件，当选中值变化时，触发 emit 事件通知父组件。
- 区/县组件监听父组件传入的城市 id 值，并根据城市 id 过滤出对应的区/县数据，渲染区/县数据，并监听选中值变化事件，当选中值变化时，触发 emit 事件通知父组件。
父组件整合
- 父组件引入三个组件，传入相应的数据和选中值，监听三个组件的选中值变化事件，当三个组件的选中值都确定后，整合成完整的地址信息。
- 父组件还可以定义一些样式和交互逻辑，比如选择器的显示与隐藏、点击遮罩层关闭选择器等。

代码示例

// 省份组件
<template>
  <select v-model="selectedProvince" @change="emitProvinceChange">
    <option v-for="province in provinces" :key="province.id" :value="province.id">
      {{ province.name }}
    </option>
  </select>
</template>

<script>
  export default {
    props: ['provinces'],
    data() {
      return {
        selectedProvince: null
      }
    },
    methods: {
      emitProvinceChange() {
        this.$emit('provinceChange', this.selectedProvince)
      }
    }
  }
</script>

// 城市组件
<template>
  <select v-model="selectedCity" @change="emitCityChange">
    <option v-for="city in cities" :key="city.id" :value="city.id">
      {{ city.name }}
    </option>
  </select>
</template>

<script>
  export default {
    props: ['cities', 'provinceId'],
    data() {
      return {
        selectedCity: null
      }
    },
    computed: {
      filteredCities() {
        return this.cities.filter(city => city.provinceId === this.provinceId)
      }
    },
    methods: {
      emitCityChange() {
        this.$emit('cityChange', this.selectedCity)
      }
    }
  }
</script>

// 区/县组件
<template>
  <select v-model="selectedDistrict" @change="emitDistrictChange">
    <option v-for="district in districts" :key="district.id" :value="district.id">
      {{ district.name }}
    </option>
  </select>
</template>

<script>
  export default {
    props: ['districts', 'cityId'],
    data() {
      return {
        selectedDistrict: null
      }
    },
    computed: {
      filteredDistricts() {
        return this.districts.filter(district => district.cityId === this.cityId)
      }
    },
    methods: {
      emitDistrictChange() {
        this.$emit('districtChange', this.selectedDistrict)
      }
    }
  }
</script>

// 父组件
<template>
  <div>
    <ProvinceComponent :provinces="provinces" @provinceChange="handleProvinceChange" />
    <CityComponent :cities="cities" :provinceId="selectedProvince" @cityChange="handleCityChange" />
    <DistrictComponent :districts="districts" :cityId="selectedCity" @districtChange="handleDistrictChange" />
    <p>选中地址：{{ selectedProvinceName }}, {{ selectedCityName }}, {{ selectedDistrictName }}</p>
  </div>
</template>

<script>
  import ProvinceComponent from './ProvinceComponent.vue';
  import CityComponent from './CityComponent.vue';
  import DistrictComponent from './DistrictComponent.vue';

  export default {
    components: {
      ProvinceComponent,
      CityComponent,
      DistrictComponent
    },
    data() {
      return {
        provinces: [/* 省份数据 */],
        cities: [/* 城市数据 */],
        districts: [/* 区/县数据 */],
        selectedProvince: null,
        selectedCity: null,
        selectedDistrict: null,
        selectedProvinceName: '',
        selectedCityName: '',
        selectedDistrictName: ''
      }
    },
    methods: {
      handleProvinceChange(provinceId) {
        this.selectedProvince = provinceId;
        this.selectedProvinceName = this.provinces.find(province => province.id === provinceId).name;
      },
      handleCityChange(cityId) {
        this.selectedCity = cityId;
        this.selectedCityName = this.cities.find(city => city.id === cityId).name;
      },
      handleDistrictChange(districtId) {
        this.selectedDistrict = districtId;
        this.selectedDistrictName = this.districts.find(district => district.id === districtId).name;
      }
    }
  }
</script>

总结

本文介绍了使用 Vue 实现城市三级联动选择器的方法，并提供了一个简单的代码示例。在实际项目中，可能还需要考虑更多细节，例如数据来源、样式设计、错误处理等。希望本文对您有所帮助。