使用 `china-region` 实现 Vue3 + TS 的省市区三级联动选择器

在日常前端开发中，地址选择器是非常常见的功能，尤其是包含“省、市、区”三级联动的组件。借助 china-region 这个库，我们可以非常轻松地实现这一需求，并与 Vue3 组件系统自然集成。本文将带你一步步构建一个带有回显功能的省市区选择器。

技术栈

• Vue 3 +

  ---

  总结

  本组件的优势：

  • 使用 china-region 获取权威行政区域数据；
  • 响应式联动逻辑清晰；
  • 支持外部 props 赋值，方便做表单回显；
  • 使用 defineExpose 暴露接口，增强复用性。

  这个组件可以作为表单组件的基础模块，配合表单校验、提交逻辑后非常实用。

  ---

  这个组件只实现了最简单的三级地区选择以及回显，下一步可以尝试：

  • 添加“清空选择”按钮；
  • 使用 pinia 等状态管理库联动其他表单项。

  如果你觉得这篇文章对你有帮助，欢迎点赞收藏！有问题也欢迎留言讨论！