vue简单下拉框组件

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

<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);      },