城市三级联动

vue组件city，城市三级联动，两个接口，一个获取省接口，一个获取市区接口

父组件：

    <city @addlist="getCity" :addList="addList" class="mb20"></city> 

    引入子组件

    import city from 'xxxxxx';

    components : {city}

    getCity(data) {

                //从子组件中获取数据

                this.addList.province = data.province;

                this.addList.city = data.city;

                this.addList.area = data.area;

            },

子组件：

        <el-select v-model="addList.province" value-key="sysAreaCode" @change="getProvince($event)" placeholder="省">

                <el-option v-for="item in provinceList" :key="item.sysAreaCode" :label="item.sysAreaName" :value="item"></el-option>

        </el-select>

        <el-select v-model="addList.city"  value-key="sysAreaCode" @change="getProvince($event)" placeholder="市">

                <el-option v-for="item in cityList" :key="item.sysAreaCode" :label="item.sysAreaName" :value="item"></el-option>

            </el-select>

        <el-select v-model="addList.area"  value-key="sysAreaCode" @change="getProvince($event)" placeholder="区">

                <el-option v-for="item in areaList" :key="item.sysAreaCode" :label="item.sysAreaName" :value="item"></el-option>

            </el-select>

    props: ["addList"],  //父组件通过props传递addList给子组件

    methods : {

        getProvince(e){

                  

                //获取市区数据，然后赋值给对应的数组

                var vm = this;

                 setTimeout(function() {

                            vm.$emit("addlist", vm.addList);  //注意要把数据通过emit传递给父组件

                    }, 10);

        }

    }

    mounted （）{

        //通过省接口获取省级数据

    }