333.png

主要代码：

• 子组件

  <el-select v-model="province" placeholder="省" @change="selectTrigger"  popper-class="selt" :popper-append-to-body="false">
    <el-option
      v-for="item in options1"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
  

script：

watch: {
  province(val) {
    console.log('val1', val)
    this.$emit('changeName', this.province)
  },
}

• 父组件：

  <template>
   <div class="seach">
    <selecter
      class="sel"
      ref="childseachs"
      @changeName="lockValue"
    >
      <q-btn @click="serchs" label="查询"></q-btn>
    </selecter>
  </div>
  </template>
  <script>
    import selecter from "../../components/right/selecter.vue"
  
    export default {
      name: 'cs',
      components: {
        selecter
      },
      data () {
        return {
          province:'',
        }
      },
      methods: {
          lockValue(province) {
            console.log('111sss', province)
            this.province = province
            },
       }
  }
  

ps:如果是监听并获取到一个子组件里面多个值，在父组件页面调用的

    <selecter
      class="sel"
      ref="childseachs"
      @changeName="lockValue"
    ></selecter>

里面就要写几个@changeName="lockValue"

// changeName:子组件watch的 this.$emit('changeName', this.province)的changeName，是自定义的
// lockValue：父组件的方法名

完整代码：

1.子组件代码

<template>
  <div class="selecter row item-center">
    <el-select v-model="province" placeholder="省" @change="selectTrigger"  popper-class="selt" :popper-append-to-body="false">
      <el-option
        v-for="item in options1"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select v-model="city" placeholder="市" @change="selectCountry"  popper-class="selt" :popper-append-to-body="false">
      <el-option
        v-for="item in options2"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="region" placeholder="区/县" @change="country"  popper-class="selt" :popper-append-to-body="false">
      <el-option
        v-for="item in options3"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <div>
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'selecter',
  props: ['city'],
  data () {
    return {
      options1: [],
      options2: [],
      options3: [],
      province: '',
      city: '',
      region: ''
    }
  },
  created() {
    this.citys()
  },
  watch: {
    province(val) {
      console.log('val1', val)
      this.$emit('changeName', this.province)
      this.province = val
    },
    city(val) {
      console.log('val2', val)
     this.$emit('changeNames', this.city)
    },
    region(val) {
     console.log('val3', val)
      this.$emit('changeRegion', this.region)
    }
  },
  methods: {
    citys() {
  // 获得省的数据
      this.$api({
        method: "get",
        url: '',
      })
    .then(res => {
      const op = res.data.data
      op.forEach(el => {
        this.options1.push({
          value: el.code,
          label: el.name
        }) 
      });
      // console.log('this.options1', this.options1)
    })
    .catch(function(error) {
      console.log(error)
    })
},
selectTrigger(value) {
  
},
selectCountry(value) {
    console.log('城市', value)
},
country(value) {
  console.log('区县', value)
}
}
}
</script>

父组件

  <template>
   <div class="seach">
    <selecter
      class="sel"
      ref="childseachs"
      @changeName="lockValue"
      @changeNames="lock"
      @changeRegion="Region"
    >
      <q-btn @click="serchs" label="查询"></q-btn>
    </selecter>
  </div>
  </template>
  <script>
    import selecter from "../../components/right/selecter.vue"

    export default {
      name: 'cs',
      components: {
        selecter
      },
      data () {
        return {
          province:'',
          city: '',
          region: ''
        }
      },
      methods: {
         lockValue(province) {
            console.log('111sss', province)
            this.province = province
          },
          lock(city) {
            console.log('222sss', city)
            this.city = city
          },
          Region(region) {
            console.log('region', region)
           this.region = region
          },
       }
  }