Vue 组件通信如何实现级联下拉菜单通过 Emit 回传选中的省市区编码

级联下拉菜单在 Vue 中通过父组件统一管理三级数据与联动逻辑，子组件仅用 $emit 向上通知本层选中编码，父组件响应后重置后续层级并请求下级数据，最终聚合为标准编码对象供业务使用。

级联下拉菜单（省→市→区）在 Vue 中实现通信，核心是子组件通过 $emit 将选中的编码（如 provinceCode、cityCode、districtCode）逐级通知父组件，由父组件统一管理数据流和联动逻辑。关键不是“多层 emit”，而是“每层只向上通知本层选择”，由父组件响应后主动更新下一级选项。

父组件统一管理三级数据与联动逻辑

父组件应持有 provinces（省列表）、cities（市列表）、districts（区列表）及当前选中值（selectedProvince、selectedCity、selectedDistrict）。当某一层选中变化时，父组件重置后续层级，并请求对应下级数据：

1. 监听 province-change 事件 → 清空 selectedCity 和 selectedDistrict，调用 API 获取该省下的城市列表
2. 监听 city-change 事件 → 清空 selectedDistrict，调用 API 获取该市下的区县列表
3. 监听 district-change 事件 → 可直接汇总完整地址或提交表单

子组件用 emit 透传本层选中编码（不跨级）

每个下拉组件（ProvinceSelect、CitySelect、DistrictSelect）只负责两件事：渲染本级选项、在用户选择后触发自己的事件（如 @update:province），并携带编码（非名称）：

1. <ProvinceSelect @update:province="handleProvinceChange" />
2. 子组件内部：this.$emit('update:province', selectedObj.code)
3. 不推荐 emit 到孙子组件，也不在子组件里直接修改父组件的 cityList —— 违反单向数据流

推荐使用 .sync 或 v-model 语法糖简化写法

为提升可读性，可用 Vue 的修饰符让父子通信更简洁：

1. 父组件：<ProvinceSelect :province.sync="selectedProvince" />
2. 子组件内触发：this.$emit('update:province', newCode)（自动匹配 .sync）
3. 同理，<CitySelect :city.sync="selectedCity" :province="selectedProvince" />，子组件根据 province prop 请求市数据

最终回传完整编码组合供业务使用

三级选中完成后，父组件可组合出标准结构，例如：

{provinceCode: '110000',cityCode: '110100',districtCode: '110101'}

这个对象可直接用于表单提交、地址校验或调用地理接口。无需子组件拼接，避免耦合；全部由父组件聚合，清晰可控。