通过父子组件传值
父组件:
1 <template> 2 <linkage :citysList="citysList" :holder="holder" @saveId="saveId"></linkage> 3 </template> 4 <script> 5 import linkage from './common/linkage' 6 export default { 7components:{ 8 linkage 9},10data() {11 return {12 citysList:[],13 holder:{14"province":"省",15"city":"市"16 },17 provinceAreaId:null,// 省地区Id18 townAreaId:null,// 市地区Id19 provinces: [],// 省地区20 citys:[],// 市地区21 city: '',// 市地区22 province: '',// 省地区23 }24 }25}26 </script>
子组件:
1 <template> 2<div class="area"> 3<el-select v-model="citys" :placeholder="'请输入'+holder.province" @change="cityChange($event)" value-key="id" clearable> 4 <el-option v-for="item in citysList" :key="item.areaName" :label="item.areaName" :value="item"></el-option> 5 </el-select> 6 <el-select v-model="areas" :placeholder="'请输入'+holder.city" @change="areaChange($event)" value-key="id" clearable> 7 <el-option v-for="item in areasList" :key="item.areaName" :label="item.areaName" :value="item"></el-option> 8 </el-select> 9</div>10 </template>1112 <script>13export default {14 props:{15 citysList:{16 type:Array,17 default:null18 },19 holder:{20 type:Object,21 default:null22 }23 },24 data() {25 return {26 saveArray:[],27 citys:"",28 provinceAreaId:null,// 省地区Id29 townAreaId:null,// 市地区Id30 areasList:[],31 areas:""32 }33 },34 methods:{35 cityChange(value){36 this.areas = ''37 this.areasList = value.nodes38 this.provinceAreaId = value.id39 this.saveArray[0]=this.provinceAreaId40 this.$emit("saveId",this.saveArray)41 },42 areaChange(value){43 this.townAreaId = value.id44 this.saveArray[1]=this.townAreaId45 this.$emit("saveId",this.saveArray)46 }47 }48}49 </script>