因为要将选择的数据传回父组件，所以要传一个对象过去。

<template>
  <!--下拉单选框-->
  <div class="base-select" @click="showDataList" v-bind:style="{width: widthData}">
      <div class="sub-selected-value">
        {{selectedValue.value}}<!--显示选择的值-->
        <div class="sub-select-list" v-bind:style="{width: widthData}" v-if="showData">
          <div class="sub-select-item" v-for="(item, index) in dataList" @click.stop="select(item, index)">
            {{item.value}}
          </div>
        </div>
      </div>
  </div>
</template>
<style lang="scss">
  .base-select {
    position: relative;
    top: 0px;
    float: right;
    border: 1px solid;
    height: 25px;
    //width: 160px;
    &:after { position: absolute;
      top: 50%;
      right: 2px;
      transform: translateY(-50%);
      content: '';
      width: 0;
      border-top: 5px solid black;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      height: 0;
    }
      .sub-selected-value {
        position: absolute;
        top: -7px;
        .sub-select-list { position: absolute;
          top: 33px;
          background: white;
          //width: 160px;
          box-shadow: 1px 1px 1px 1px #D9D9D9;
          z-index: 9;
          .sub-select-item { width: auto;
            min-width: 7.25rem;
            height: 2.5rem;
            line-height: 2.5rem;
            position: relative;
            text-align: left;
            img { position: absolute;
              top: 50%;
              right: 0;
              transform: translate(-0.1rem, -50%);
              width: .8125rem;
              height: .625rem;
            }
          }
        }
      }
  }
</style>
<script type="text/ecmascript-6">
  export default{
    data(){
      return{
        showData: false
      }
    },
    props: {
      dataList:Array,
      selectedValue: Object,//传回父组件的选择值
      widthData:{
        type: String,
        default: "160px"
      }
    },
    methods: {
      showDataList(){
        this.showData=!this.showData
      },
      select(item,index){
        this.showData=false;
        console.log("选择");
        console.log(item);
        console.log(index);
        //this.selectedValue=item;
        //赋值的时候要分开写
        this.selectedValue.key=item.key;
        this.selectedValue.value=item.value;
        this.$emit('select');
        console.log("0"+this.selectedValue.value);
      },
    },
    mounted(){
    }
  }
</script>

父组件中调用
html代码：

<BaseSelect v-on:select="showProject"
              :selectedValue="projectName"
              :dataList="list"
              :widthData="widthData"></BaseSelect>

js代码

data() {
      return {
        list:[
          {key:"gd",value:"卫我好交换空间"},
          {key:"gx",value:"我去而且翁群无"},
          {key:"gx",value:"王企鹅群无科技二号"}
        ],
        projectName:{//岁子组件的选择值改变而改变的值
          key:"",
          value:""
        },
        widthData:"180px",
       }
      }
showProject (){
        console.log("下拉列表的值改变了");
        console.log("213122"+this.projectName.value);
        console.log("213122"+this.projectName.key);
      },