通过父子组件传值
父组件:
1 <template> 2 <linkage :citysList="citysList" :holder="holder" @saveId="saveId"></linkage> 3 </template> 4 <script> 5 import linkage from './common/linkage' 6 export default { 7 components:{ 8 linkage 9 }, 10 data() { 11 return { 12 citysList:[], 13 holder:{ 14 "province":"省", 15 "city":"市" 16 }, 17 provinceAreaId:null,// 省地区Id 18 townAreaId:null,// 市地区Id 19 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> 11 12 <script> 13 export default { 14 props:{ 15 citysList:{ 16 type:Array, 17 default:null 18 }, 19 holder:{ 20 type:Object, 21 default:null 22 } 23 }, 24 data() { 25 return { 26 saveArray:[], 27 citys:"", 28 provinceAreaId:null,// 省地区Id 29 townAreaId:null,// 市地区Id 30 areasList:[], 31 areas:"" 32 } 33 }, 34 methods:{ 35 cityChange(value){ 36 this.areas = '' 37 this.areasList = value.nodes 38 this.provinceAreaId = value.id 39 this.saveArray[0]=this.provinceAreaId 40 this.$emit("saveId",this.saveArray) 41 }, 42 areaChange(value){ 43 this.townAreaId = value.id 44 this.saveArray[1]=this.townAreaId 45 this.$emit("saveId",this.saveArray) 46 } 47 } 48 } 49 </script>