Vue+Element-ui+二级联动封装组件

               

通过父子组件传值

父组件：

<template>
<linkage :citysList="citysList" :holder="holder" @saveId="saveId"></linkage>
</template>
<script>
import linkage from './common/linkage'
  export default {
    components:{
      linkage
    },
    data() {
      return {
            citysList:[],
            holder:{
              "province":"省",
              "city":"市"
            },
            provinceAreaId:null,// 省地区Id
            townAreaId:null,// 市地区Id
            provinces: [],// 省地区
            citys:[],// 市地区
            city: '',// 市地区
            province: '',// 省地区
            }
        }
    }
</script>

子组件：

<template>
    <div class="area">
     <el-select v-model="citys" :placeholder="'请输入'+holder.province" @change="cityChange($event)" value-key="id" clearable>
            <el-option v-for="item in citysList" :key="item.areaName" :label="item.areaName" :value="item"></el-option>
        </el-select>
        <el-select v-model="areas" :placeholder="'请输入'+holder.city" @change="areaChange($event)" value-key="id" clearable>
            <el-option v-for="item in areasList" :key="item.areaName" :label="item.areaName" :value="item"></el-option>
        </el-select>
    </div>
</template>
    
<script>
    export default {
        props:{
            citysList:{
                type:Array,
                default:null
            },
            holder:{
                type:Object,
                default:null
            }
        },
        data() {
            return {
                saveArray:[],
                citys:"",
                provinceAreaId:null,// 省地区Id
                townAreaId:null,// 市地区Id
                areasList:[],
                areas:""
            }
        },
        methods:{
            cityChange(value){
                this.areas = ''
                this.areasList = value.nodes
                this.provinceAreaId = value.id
                this.saveArray[0]=this.provinceAreaId
                this.$emit("saveId",this.saveArray)
            },
            areaChange(value){
                this.townAreaId = value.id
                this.saveArray[1]=this.townAreaId
                this.$emit("saveId",this.saveArray)
            }
        }
    }
</script>