\"手把手教你打造Vue3城市选择器：深度解析联动组件(组件城市数据联动选择器)

在Web开发中，城市选择器作为常见的交互组件，常用于用户填写地址信息、筛选地理位置等场景。
本文将手把手带你利用Vue3框架，从零开始打造一个功能完备、性能优越的城市选择器，深入解析其联动组件封装的全过程。
让我们一同领略Vue3的强大魅力，提升实战技能。

## 一、项目初始化与依赖安装

1. 创建Vue3项目

bashvue create vue-city-selector

选择默认的Vue3配置或自定义配置。

2. 安装所需依赖

bashnpm install vue@next element-plus axios

## 二、基础架构设计

1. 目录结构规划

在`src/components`目录下创建以下文件夹和文件：

- `CitySelector`: 组件主目录

- `index.vue`: 主组件

- `CityList.vue`: 城市列表子组件

- `Province.vue`: 省份选择子组件

- `City.vue`: 城市选择子组件

- `District.vue`: 区县选择子组件

2. 数据结构设计

typescriptinterface CityModel { provinceId: string; provinceName: string; cityId: string; cityName: string; districtId: string; districtName: string;}

## 三、数据获取与处理

1. 获取城市数据

typescriptimport axios from 'axios';const CITY_API = 'https://your-api-url-to-get-cities';export async function fetchCities() { const response = await axios.get(CITY_API); return response.data;}

在`src/api`目录下创建`city.ts`文件，使用axios获取城市数据：

2. 数据预处理

typescriptimport { CityModel } from '../types';export function preprocessCityData(cityData: any[]): CityModel[] { // 实现数据预处理逻辑，将原始数据转化为CityModel数组}

## 四、组件开发

###

1. Province.vue

####

模板

html<template> <el-select v-model="provinceId" @change="onProvinceChange"> <el-option v-for="province in provinces" :key="province.id" :label="province.name" :value="province.id" /> </el-select></template>

####

脚本

typescriptimport { defineComponent, ref } from 'vue';import { fetchCities, preprocessCityData } from '@/api/city';import { ProvinceModel } from '@/types';export default defineComponent({ props: { initialProvinceId: { type: String, default: '', }, }, setup(props) { const provinceId = ref(props.initialProvinceId); const provinces = ref<ProvinceModel[]>([]); // 在组件挂载时获取省份数据并预处理 async function fetchAndProcessProvinces() { const rawCityData = await fetchCities(); const processedData = preprocessCityData(rawCityData); provinces.value = processedData.map((city) => ({ id: city.provinceId, name: city.provinceName, })); } fetchAndProcessProvinces(); function onProvinceChange(newId: string) { provinceId.value = newId; // 触发事件，传递新选中的省份ID给父组件 emit('province-change', newId); } return { provinceId, provinces, onProvinceChange, }; },});

###

2. City.vue & District.vue

这两个组件的实现方式与`Province.vue`类似，只需调整模板中的标签名称和属性，以及处理对应层级的数据即可。

###

3. CityList.vue

####

模板

html<template> <div> <Province :initialProvinceId="provinceId" @province-change="onProvinceChange" /> <City :provinceId="provinceId" /> <District :provinceId="provinceId" :cityId="cityId" /> </div></template>

####

脚本

typescriptimport { defineComponent, ref } from 'vue';import Province from './Province.vue';import City from './City.vue';import District from './District.vue';export default defineComponent({ setup() { const provinceId = ref(''); const cityId = ref(''); function onProvinceChange(newId: string) { provinceId.value = newId; } return { provinceId, cityId, onProvinceChange, }; }, components: { Province, City, District, },});

###

4. index.vue

####

模板

html<template> <CityList /></template><script lang="ts">import CityList from './CityList.vue';export default { components: { CityList, },};</script>

至此，我们已经完成了Vue3城市选择器的开发工作。
通过合理划分组件、封装联动逻辑，实现了省份、城市、区县的联动选择功能。
接下来，可以根据实际需求对组件进行样式定制、添加更多交互效果等优化工作，进一步提升用户体验。

本文详细展示了如何利用Vue3从零开始构建一个城市选择器组件，涵盖了项目初始化、基础架构设计、数据获取与处理、组件开发等关键步骤，旨在帮助开发者深入理解Vue3组件化开发理念，提升实战能力。
希望对你在实际工作中开发类似功能组件有所帮助。