基于 Vue 的城市选择器组件实现方法及代码示例

买了东西或注册账户时老会碰到城市选择器这种玩意太常见了。是不是看着不起眼？但实际上它挺有必要的！跟着我学习下如何用Vue弄这个组件，保证你一看就会，轻松解决问题。

明确组件需求

搞事情前，想想自己想要干嘛哈？挑地方也是这么回事儿：选择一个省份，然后看看这儿都有些啥子城市；选定后，还要弄清它归哪儿管哦；最后别忘记告诉大伙，你心仪的那个城市和周边的小地方

组件结构设计

搞定了，明白需求咱们就开始干活！把这个大家伙分成三个模块：省份、城市以及区域。这样，让每个人负责各自的部分，也比较好管。而且，这几个模块之间可以互相配合，比如说选了省份之后，城市的选项也就明了咯。

子组件实现

赶紧动手给这些小东西穿上新衣裳！先把顶部的省份选择器搞定，接着来城市和地区选择器。让他们都各就各位，排成整齐的队伍，最后美美的。

省份选择器实现

  

    
    
    
    

      
已选城市：{{ selectedCity }}
      
已选区域：{{ selectedArea }}
    
  


import ProvinceSelector from './ProvinceSelector.vue'
import CitySelector from './CitySelector.vue'
import AreaSelector from './AreaSelector.vue'
export default {
  components: {
    ProvinceSelector,
    CitySelector,
    AreaSelector
  },
  data() {
    return {
      selectedProvince: '',
      selectedCity: '',
      selectedArea: ''
    }
  },
  methods: {
    handleProvinceChange(province) {
      this.selectedProvince = province
      this.selectedCity = ''
      this.selectedArea = ''
    },
    handleCityChange(city) {
      this.selectedCity = city
      this.selectedArea = ''
    },
    handleAreaChange(area) {
      this.selectedArea = area
    }
  }
}

首先，来聊聊挑地方这档子事。就是看你想去哪个省或者直辖市。确定之后，咱们就可以启动城市挑选系统。在这里，要用到Vue的props和events功能，保证信息传递无误哟。

城市选择器实现

大家聊聊这城市选择器~度娘根据你所在的省份给你推荐相应的城市，然后动态展示！挑好后咱要告诉区域选择器待会儿该给你看哪个区了！虽然有点麻烦，但弄明白了也就不难

  

    
      {{ province }}
    
  


export default {
  data() {
    return {
      selectedProvince: ''
    }
  },
  computed: {
    provinces() {
      // 从后台或静态数据获取省份列表
      return ['北京', '上海', '广东', '江苏']
    }
  },
  methods: {
    handleChange() {
      this.$emit('provinceChange', this.selectedProvince)
    }
  }
}

区域选择器实现

到了区域选项这个块头！给你推荐之前看过的城市提醒后，相应的地方就出来。选完区域后，城市的活儿就干完了~虽然咋一看好像只是个普通的展示功能，但你别轻视~

  

    
      {{ city }}
    
  


export default {
  props: {
    province: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectedCity: ''
    }
  },
  computed: {
    cities() {
      // 根据选择的省份从后台或静态数据获取城市列表
      if (this.province === '北京') {
        return ['北京市', '朝阳区', '海淀区']
      } else if (this.province === '上海') {
        return ['上海市', '黄浦区', '徐汇区']
      } else if (this.province === '广东') {
        return ['广州市', '深圳市', '珠海市']
      } else if (this.province === '江苏') {
        return ['南京市', '苏州市', '无锡市']
      } else {
        return []
      }
    }
  },
  watch: {
    province(newValue) {
      this.selectedCity = ''
    }
  },
  methods: {
    handleChange() {
      this.$emit('cityChange', this.selectedCity)
    }
  }
}

组件集成与使用

搞定了子部件，现在就可以用来组合成一个城市筛选工具~随便往哪个网站上一贴就能马上开始使用！以后买东西、聊天可要方便多了，想去哪逛就去哪聊！

总结与展望

  

    
      {{ area }}
    
  


export default {
  props: {
    city: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectedArea: ''
    }
  },
  computed: {
    areas() {
      // 根据选择的城市从后台或静态数据获取区域列表
      if (this.city === '北京市') {
        return ['东城区', '西城区', '朝阳区']
      } else if (this.city === '上海市') {
        return ['黄浦区', '徐汇区', '长宁区']
      } else if (this.city === '广州市') {
        return ['越秀区', '海珠区', '天河区']
      } else if (this.city === '南京市') {
        return ['玄武区', '秦淮区', '鼓楼区']
      } else {
        return []
      }
    }
  },
  watch: {
    city(newValue) {
      this.selectedArea = ''
    }
  },
  methods: {
    handleChange() {
      this.$emit('areaChange', this.selectedArea)
    }
  }
}

搞定！终于搞出了个用Vue做得城市选择器组件！学到了如何进阶使用组件和交互，还懂得了怎么有效沟通！希望这小技巧能帮你更好了解Vue，并运用到日常生活中去～现在想问问，做这组件时，哪个地方让你们抓狂？快来评论区聊聊，别忘了点赞转发

  

    
  


import CitySelector from './CitySelector.vue'
export default {
  components: {
    CitySelector
  }
}