现在这个列表只有三条信息，怎么在这个基础上增加信息呢

Question

<template>

<div class="t_selects">
         <!-- 使用下拉框组件 -->
         <!-- @va是子组件传给父组件的事件 有两个参数（当前点击下拉框的索引，当前点击下拉框里面的文字） -->
         <!-- //num是指定下拉框的个数 最多为5个 -->
         <!-- //selects1-selects5 是自定义下拉框1-5里面的内容 -->
         <Myselects
         @va="sunValue"   
         num="3"
         :selects1="selects1"
         :selects2="selects2"
          :selects3="selects3"
         ></Myselects>
    </div>
</template>

<script>
  import Selects from "../components/Select.vue";
    export default {
        data() {
    return {
      selects1: "列表1",
      selects2: "列表2",
      selects3: "列表3",
      }
      },
  components: {
    Myselects: Selects
  },
  methods: {
    //拿到子组件下拉框里面的索引及内容  参数(当前点击下拉框的索引，当前点击下拉框里面的文字)

    sunValue(index,val) {
      console.log(index,val);
    }
    }
    }
</script>

<style lang="scss" scoped> 
//定义父盒子的宽高 
 .t_selects {
    width: 300;
    height: 35px;
    z-index: 1000;
   }
</style>
<
 

组件

<template>
  <div class="selects">
    <div
      :class="{selects0show: !isshow,selects0hade: isshow}"
      class="selects0"
      @click="isshow=!isshow"
    >
      <p ref="mybox">请选择</p>
        <img src="../assets/images/z_x_jt.png" alt srcset />
    </div>
    <div ref="myselect" :class="{show: !isshow,hade: isshow}" class="sel">
      <div
        @click="cutValue(1)"
        ref="mybox1"
        :class="{borders:num ==1}"
        :style="{display: num >=1?'block':'none'}"
      >{{selects1}}</div>
      <div
        @click="cutValue(2)"
        ref="mybox2"
        :class="{borders:num ==2}"
        :style="{display: num >=2?'block':'none'}"
      >{{selects2}}</div>
      <div
        @click="cutValue(3)"
        ref="mybox3"
        :class="{borders:num ==3}"
        :style="{display: num >=3?'block':'none'}"
      >{{selects3}}</div>
      <div
        @click="cutValue(4)"
        ref="mybox4"
        :class="{borders:num ==4}"
        :style="{display: num >=4?'block':'none'}"
      >{{selects4}}</div>
      <div
        @click="cutValue(5)"
        ref="mybox5"
        :class="{borders:num ==5}"
        :style="{display: num >=5?'block':'none'}"
      >{{selects5}}</div>
    </div>
  </div>
</template>


<script>
export default {
  props: {
    num: String, //显示多少个下拉框
    selects1: String, //列表里的文字
    selects2: String,
    selects3: String,
    selects4: String,
    selects5: String
  },
  data() {
    return {
      isshow: true //控制下拉框显示及隐藏
    };
  },
  methods: {
    //点击换文字的方法
    cutValue(val) {
      let _this = this
      cutfun(val)
      _this.isshow = true;
      function cutfun(val){
        if (val == 1) {
          _this.$refs.mybox.innerText = _this.$refs.mybox1.innerText;
        } else if(val == 2){
          _this.$refs.mybox.innerText = _this.$refs.mybox2.innerText;
        } else if(val == 3){
          _this.$refs.mybox.innerText = _this.$refs.mybox3.innerText;
        }else if(val == 4){
           _this.$refs.mybox.innerText = _this.$refs.mybox4.innerText;
        }else if(val == 5){
           _this.$refs.mybox.innerText = _this.$refs.mybox5.innerText;
        }
      _this.$emit("va", val, _this.$refs.mybox.innerText);
      }
    }
  }
};
</script>

<style scoped>
/* //显示下拉框 */
.show {
  display: block;
}
/* //隐藏下拉框 */
.hade {
  display: none;
}
/* //点击时改变选择框的边框颜色 */
.selects0show {
  border: 1px solid #01be6e;
}
/* //恢复边框颜色 */
.selects0hade {
  border: 1px solid #e4e4e4;
}
/* //最后一个下拉框底部加边框 */
.borders {
  border-bottom: 1px solid #01be6e !important;
}

/* //倒三角 */
.traing{
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #666666;
}
.selects {
  width: 100%;
  height: 100%;}
  .selects0 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;}
    .selects0 p {
      line-height: 100%;
      display: inline;
      color: #666666;
      font-size: 15px;
      padding-left: 10px;
    }
    .selects0 img {
      margin-right: 10px;
      transform: translateY(-2px);
    }
  .sel {
    width: 100%;
    height: 100%;}
   .sel div {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 35px;
      border: 1px solid #01be6e;
      border-top: none;
      padding-left: 10px;
      border-bottom: none;
      background: white;
    }
    .sel div:hover {
      background: #01be6e;
      color: white;
    }
   .sel .selects0:hover {
      background: white;
    }
</style>

Answer 1

:selects1="selects1"
:selects2="selects2"
:selects3="selects3"
这里改为用数组传过去不就可以增删改查了