Vue.js省市区三级联动是通过组件化实现地址选择的核心功能，用户依次选择省份、城市、区县时，下级数据动态加载并联动更新，通常采用v-model绑定选中值，@change事件触发下级数据请求（可结合axios获取后端数据或使用本地JSON），data中定义省市区数组和当前选中值，利用Vue的响应式特性实时更新视图，该功能广泛应用于表单地址填写、配送区域选择等场景，有效提升用户选择效率，避免手动输入错误，是前端开发中常见的交互组件。
Vue.js 实现省市区三级联动：从数据到交互的完整指南
在 Web 表单开发中，省市区三级联动是地址信息录入的常见且重要的场景，广泛应用于用户注册、物流信息填写、收货地址管理等业务需求，Vue.js 凭借其强大的响应式数据绑定机制和组件化开发理念，能够高效、优雅地实现这一功能，本文将从数据准备、组件设计、核心逻辑实现到性能优化与扩展，系统性地介绍如何构建一个流畅、易用的省市区三级联动组件。
数据准备：构建层级化行政区划数据
三级联动的核心基础是结构化的行政区划数据，数据来源可以是官方发布的开源数据（如国家统计局的行政区划代码标准数据）、第三方地图服务商（如高德地图、腾讯地图）提供的行政区划 API，或自行整理维护的数据集，无论来源如何，数据结构的设计至关重要。
数据格式要求
数据需清晰包含省（直辖市、自治区）、市（地区、自治州、盟）、区县（县级市、市辖区、县、旗、自治县、自治旗、特区、林区）三级信息，每级行政区划需具备唯一标识符（如 id） 和层级关联标识（如 parentId 或直接使用嵌套结构 children），以下是两种主流的数据结构形式：
（1）树形结构（嵌套式）
这种结构直观地展现了层级关系,前端遍历和渲染逻辑相对清晰。
[
{
"id": 110000,
"name": "北京市",
"children": [
{
"id": 110100,
"name": "北京市",
"children": [
{"id": 110101, "name": "东城区"},
{"id": 110102, "name": "西城区"},
// ... 其他区县
]
}
]
},
{
"id": 120000,
"name": "天津市",
"children": [
// ... 类似结构
]
}
// ... 其他省份
]
（2）扁平化结构（通过 parentId 关联）
这种结构数据紧凑,存储和传输效率较高，但需要通过 parentId 进行层级关联查询。
[
{"id": 110000, "name": "北京市", "parentId": 0}, // 省级：parentId=0（根节点）
{"id": 110100, "name": "北京市", "parentId": 110000}, // 市级：parentId=省级id
{"id": 110101, "name": "东城区", "parentId": 110100}, // 区县级：parentId=市级id
// ... 其他数据
]
推荐使用树形结构：对于前端 Vue 组件开发，树形结构天然契合组件的嵌套特性，数据遍历和层级筛选逻辑更直观，可读性更强，数据加载通常使用 axios 或类似库，支持从本地 JSON 文件或远程 API 获取。
// 在组件中加载数据 (使用 Composition API)
import { ref, onMounted } from 'vue';
import axios from 'axios';
const regionData = ref(null);
onMounted(async () => {
try {
const response = await axios.get('/api/regions.json'); // 本地或远程数据源
regionData.value = response.data;
} catch (error) {
console.error('加载行政区划数据失败:', error);
// 可在此处添加错误提示逻辑
}
});
组件设计：拆分与复用
遵循 Vue 的组件化思想，将三级联动拆分为可复用的独立子组件，并通过父组件统一管理状态和数据流，是实现清晰架构和代码复用的关键。
组件层级结构
AddressSelector (父组件)
├── ProvinceSelect (省级选择组件)
├── CitySelect (市级选择组件)
└── DistrictSelect (区县级选择组件)父组件：状态管理与数据传递
AddressSelector 组件作为容器，负责：
- 加载并持有完整的行政区划数据 (
regionData)。 - 维护当前选中的省、市、区 (
selectedProvince,selectedCity,selectedDistrict)。 - 根据省级选择动态生成市级选项列表 (
cityList)。 - 根据市级选择动态生成区县级选项列表 (
districtList)。 - 定义处理各级选择的回调函数 (
handleProvinceSelect,handleCitySelect,handleDistrictSelect)，并传递给子组件。 - 控制子组件的可用状态 (
disabled)。
<template>
<div class="address-selector">
<ProvinceSelect
:province-list="regionData"
:selected-province="selectedProvince"
@selected="handleProvinceSelect"
/>
<CitySelect
:city-list="cityList"
:selected-city="selectedCity"
:disabled="!selectedProvince"
@selected="handleCitySelect"
/>
<DistrictSelect
:district-list="districtList"
:selected-district="selectedDistrict"
:disabled="!selectedCity"
@selected="handleDistrictSelect"
/>
</div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';
import ProvinceSelect from './ProvinceSelect.vue';
import CitySelect from './CitySelect.vue';
import DistrictSelect from './DistrictSelect.vue';
// 状态管理
const regionData = ref(null); // 完整的省市区树形数据
const selectedProvince = ref(null); // 当前选中的省份对象
const selectedCity = ref(null); // 当前选中的城市对象
const selectedDistrict = ref(null); // 当前选中的区县对象
// 计算属性：根据选中省份动态生成城市列表
const cityList = computed(() => {
if (!selectedProvince.value || !selectedProvince.value.children) return [];
return selectedProvince.value.children;
});
// 计算属性：根据选中城市动态生成区县列表
const districtList = computed(() => {
if (!selectedCity.value || !selectedCity.value.children) return [];
return selectedCity.value.children;
});
// 数据加载
onMounted(async () => {
try {
const response = await axios.get('/api/regions.json');
regionData.value = response.data;
} catch (error) {
console.error('加载行政区划数据失败:', error);
// 可添加全局错误提示
}
});
// 事件处理函数
const handleProvinceSelect = (province) => {
selectedProvince.value = province;
selectedCity.value = null; // 清空下级选择
selectedDistrict.value = null;
};
const
