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

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

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

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

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

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

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

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

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

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

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

立即学习“前端免费学习笔记（深入）”；

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

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

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

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

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