vue組件city，城市三級聯(lián)動，兩個接口，一個獲取省接口，一個獲取市區(qū)接口

父組件：

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

????引入子組件

????import city from 'xxxxxx';

????components : {city}

????getCity(data) {

? ? ? ? ? ? ? ? //從子組件中獲取數(shù)據(jù)

? ? ? ? ? ? ? ? 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="區(qū)">

? ? ? ? ? ? ????<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){

? ? ? ? ? ? ? ? ??

? ? ? ? ? ? ????//獲取市區(qū)數(shù)據(jù)，然后賦值給對應(yīng)的數(shù)組

? ? ? ? ? ? ? ? var vm = this;

? ?????????? ????setTimeout(function() {

? ? ? ? ? ? ? ? ? ? ? ? ? ? vm.$emit("addlist", vm.addList);? //注意要把數(shù)據(jù)通過emit傳遞給父組件

? ? ? ? ? ? ? ? ????}, 10);

????????}

????}

? ??mounted （）{

? ? ? ? //通過省接口獲取省級數(shù)據(jù)

????}