el-radio二次封装，单选调用父组件的方法this.$parent.event()

封装代码，传入的数据生成范围，将最大值和最小值传给后端，代码如下：

<!--
* @Author:lihk
* @Date: 2022/07/19 15:06:44
* @Description:封装的radio
-->
<template>
  <div class="radioBox">
    <div class="title">{{title}}</div>
    <el-radio-group v-model="radio" v-for="item in radioList" :key="item.id" @change="changeValue(item)">
      <el-radio :label="item.id" v-if="flag">{{item.min}} - {{item.max}}</el-radio>
      <el-radio :label="item.id" v-else>{{item.name}}</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
/**
 * @description:props说明
 * @param {String} title -单选前面的title
 * @param {Array} radioList -传入的数组选项
 * @param {Boolean} flag -判断是显示范围还是显示选项
 */
export default {
  name: 'radio',
  props: {
    title: {
      type: String,
      default: "单选：",
    },
    radioList: {
      type: Array,
      default: () => {
        return [{
          id: 1,
          max: 6,
          min: 4
        }];
      }
    },
    flag: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      radio: 1,
      radioObj: {}
    };
  },
  components: {},
  created () {
    this.getRadioObj(this.radio)
  },
  methods: {
    getRadioObj (id) {
      this.radioObj = this.radioList.find(i => i.id == id)
      this.$emit('radioObj', this.radioObj);
    },
    changeValue (val) {
      this.radioObj = val
      console.log(this.radio, "改变了单选")
      this.$emit('radioObj', this.radioObj);
      this.$parent.getUserList2()
    }
  }
}
</script>
<style lang='stylus' scoped>
.radioBox {
  display: flex;
  margin: 0 15px;
}

.title {
  width: 50px;
}
</style>

父组件可以在生命周期mounted里，等到子组件的值全部取到后再调用接口

注意：单选调用接口可以在子组件里面调用父组件的方法

this.$parent.getUserList2()