vue项目省市区三级级联菜单的实现，现成的省市地区json数据拿去用

上图是省市级联菜单的效果图，省市地区的数据文件开发者可以下载直接使用

实现级联菜单
难点1：三个下拉框之间的关联问题，这里涉及到监听事件！
难点2：根据数据的结构，如何将地区数据对应到正确的下拉框位置上。

需要注意事项：

1. 当用户选择了省/直辖市的内容后，市/区的下拉框内容会被更新，县/市的下拉框是暂时不变的。
2. 当用户选择市/区的内容后，县/市的下拉框内容更新。
3. 当用户 修改省/直辖市的内容后，市/区和县/市的下拉框内容会被清空，并且显示默认的请选择**。
4. 当用户只修改市/区内容时，县/市 下拉框内容被清空，并修改成市/区对应的县/市。

1. 首先要预先准备好一个vue框架的空项目。如果不知道vue脚手架的搭建，可以看我下一篇文章。
2. 其次，将我分享的省市地区的数据文件下载下来，放到项目的 src/assets目录下。
3. 接下来正式开始，第一步，在 src/compontents目录下， 创建下拉框组件Dropdown.vue文件，写好下拉框模板。

// 这段内容放在 <template></template> 中
 <span>
 // 这里 v-model 用来绑定数据，可以接收到用户改变后的省直辖市，方便我们寻找该省直辖市对应的市区
     <select v-model="province" @change="changeCity">
     // locaty是地区数据，因为当前是子组件，locaty是接受父组件传地区数据！
         <option v-for="(val, index) in locaty.options" :key="index" :value="val.province">{{val.province}}</option>
     </select>
     <select v-model="c" @change="changeCounty">
         <option v-for="(name, index) in city" :key="index" :value="name.name">{{name.name}}</option>
     </select>
     <select  v-model="cy">
         <option v-for="(area, index) in county" :key="index" :value="area">{{area}}</option>
     </select>
 </span>

4. Dropdown.vue的script代码，详细见代码注释：

<script>
export default {
    name: 'Dropdown',
    props : ["locaty"], // 父组件中接受的地区数据
    data() {
        return {
            province : '选择省/直辖市' ,
            // 选择市区
            c : '选择市/区',
            city : [{ name : '选择市/区' }],
            // 县市
            cy : '选择县/市',
            county : ['选择县/市']
        }
    },
    methods:{
        // 当省/直辖市选择出现变化的时候，要修改city和county
        changeCity(){
        	// 恢复默认状态
            this.c = '选择市/区'; 
            this.cy = '选择县/市'; 
            // 删除当前的city和county数组第一个数据之后的所有数据，否则会将上一次选择的内容和本次选择的内容拼接到一起！
            this.city.splice(1) 
            this.county.splice(1);
            // 查找地区数据中是否包含用户当前选择的省直辖市对应的市区数据，并将数据保存到city数组中。
            for(var item in this.locaty.options){
                if(this.locaty.options[item].province == this.province){
                    this.city = this.city.concat(this.locaty.options[item].city);
                }
            }
        },
        // 修改县/市
        changeCounty(){
        	// 同上：恢复默认状态
            this.cy = '选择县/市';
            this.county.splice(1);
            // 查找用户当前选择的
            this.locaty.options.forEach(ele => {
            // 先确定当前的省份
                if(ele.province == this.province){
                    ele.city.forEach((ele)=>{
                    // 这里确定市区
                        if(ele.name == this.c){
                        // 将市区对应的县市地区数据拼接到county中；
                            this.county = this.county.concat(ele.area);
                        }
                    })
                }
            });
        }
    }
    
}
</script>

5. 到此，子组件的工作就已经完成，该父组件调用子组件Dropdown了，父组件src/pages/Uregister.vue文件。

<template>
	<div>
		// 4. 使用下拉框组件 ， 用locaty接收地区数据city
		<Dropdown :locaty="city" ></Dropdown>
	</div>
</template>
<script>
// 1. 首先在父组件中引入地区数据
import { city } from '../assets/data.js'
// 2. 引入下拉框组件
import Dropdown from '../components/Dropdown'
export default {
    name: 'Uregister',
    components : { // 3. 注册下拉框组件
        Dropdown
    },
}
</script>

6. 以上几步就完成了省市区三级级联菜单的功能，具体css样式就随意了，有更好的办法欢迎留言讨论。