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: '',// 省地区
            }
        },
        methods: {
          saveId(value){
            if(value[0]!==''){
              this.provinceAreaId = value[0]
              this.townAreaId = null
            }
            if(value[1]){
              this.townAreaId = value[1]
            }
            this.initData()// 初始化查询接口
          },
          chooseCityClear(){
            this.addArray.provinceAreaName = '',
            this.addArray.townAreaId = null
            this.addArray.townAreaName = ''
          }
        },
    }
</script>

子组件：

<template>
    <div class="area">
        <el-select v-model="citys" :placeholder="'请输入'+holder.province" @change="cityChange($event)" value-key="id" clearable style="margin-right:10px;">
            <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.province" @change="areaChange($event)" value-key="id" clearable style="">
            <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 {
                citys:"",
                areasList:[],
                areas:"",
                provinceAreaId:null,// 省地区Id
                townAreaId:null,// 市地区Id
                saveArray:[]
            }
        },
        methods:{
            cityChange(values){
                if(!values){
                    debugger
                    this.areas = ''
                    this.provinceAreaId = null
                    this.areasList = []
                    this.townAreaId = null
                    this.saveArray[0]=null
                    this.saveArray[1]=null
                }else{
                    this.areasList = values.nodes
                    this.townAreaId = null
                    this.provinceAreaId = values.id
                }
                this.$emit("saveId",this.saveArray)
            },
            areaChange(values){
                this.townAreaId = values.id
                this.saveArray[1]=this.townAreaId
                this.$emit("saveId",this.saveArray)
            }
        }
    }
</script>
    
<style scoped>
    .area{
        display: flex;
    }
</style>