自定义的select组件

先自定义一个Select组件：

<template>
  <div class="select-div">
    <div class="selected" @click="controlShowOption">
      <p class="jiantou"><span class="arrow-bottom"></span></p>
      <input type="text" class="selected-cont" v-model="curValue" disabled :placeholder="placeholder"/>
    </div>
    <div class="options-container" v-if="showOption">
      <div class="my-scroll">
        <ul class="ul-option">
          <li class="options-one" v-for="item in options" @click="makeSureSelected(item)">{{item[itemKey]}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    options:{
      type:Array,
      default:[],
    },
    placeholder:{
      type:String,
      default:[],
    },
    value:{
      type:Number,
      default: ''
    },
    itemKey:{
      type:String,
      default:''
    }
  },
  data(){
    return {
      showOption:false,
      curValue:'',
    }
  },
  methods:{
    controlShowOption(){
      this.showOption = !this.showOption;
    },
    makeSureSelected(item){
      this.curValue = item.value;
      this.controlShowOption();
      this.$emit('input',this.curValue);
    },
  },
  watch:{
    value(val){
      this.curValue = val;
    }
  },
  mounted() {
    this.curValue = this.value;
  },

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .arrow-bottom {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;  /* 左边框的宽 */
    border-right: 4px solid transparent; /* 右边框的宽 */
    border-top: 7px solid #fff; /* 下边框的长度|高,以及背景色 */
    font-size: 0;
    line-height:44px;
  }
  .select-div{
    display:inline-block;
    border:solid 1px rgba(1, 227, 255, 1);
    width:200px;
    position:relative;
    height:35px;
    border-radius:5px;
    background:rgba(5,38,79,0.76);
  }
  .jiantou{
    position:absolute;
    right:10px;
    margin:0;
    top:0;
    bottom:0;
  }
  .options-one{
    margin:0;
    line-height:35px;
    text-align:left;
    padding-left:10px;
    color:#000;
    list-style:none;
  }
  .selected-cont{
    position:relative;
    background:none;
    height:35px;
    border:none;
    color:#fff;
  }
  .options-container{
    border:solid 1px #eee;
    margin-top:10px;
    position:absolute;
    width:100%;
    transition:0.3s;
    background:#fff;
  }
  .ul-option{
    margin:0;
    padding:0;
  }
  .options-one:hover{
    background:rgba(3,40,85,0.76);
    cursor:pointer;
    color:#fff;
  }
  .my-scroll{
    max-height:260px;
    overflow:auto;
    overflow-x:hidden;
  }
  .my-scroll .scr{
    height:auto;
    margin-bottom:20px;
    max-height:200px;
  }
  .my-scroll::-webkit-scrollbar{/*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/
    width:10px;
    height:10px;
  }
  .my-scroll::-webkit-scrollbar-button{/*滚动条两端的按钮，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置2）*/
    background:#74D334;
    display:none
  }
  .my-scroll::-webkit-scrollbar-track{/*外层轨道，可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果（位置3）*/
    background:rgba(3,40,85,0.76);
    display:none
  }
  .my-scroll::-webkit-scrollbar-track-piece{/*内层轨道，滚动条中间部分（位置4）*/
    background:#fff;
  }
  .my-scroll::-webkit-scrollbar-thumb{/*滚动条里面可以拖动的那部分（位置5）*/
    background:#eee;
    border-radius:4px;
  }
  .my-scroll::-webkit-scrollbar-corner {/*边角（位置6）*/
    background:#82AFFF;
  }
  .my-scroll::-webkit-scrollbar-resizer  {/*定义右下角拖动块的样式（位置7）*/
    background:#FF0BEE;
  }
  .my-scroll {
    scrollbar-arrow-color: #fff; /**//*三角箭头的颜色*/
    scrollbar-face-color: #fff; /**//*立体滚动条的颜色*/
    scrollbar-3dlight-color: #666; /**//*立体滚动条亮边的颜色*/
    scrollbar-highlight-color: #666; /**//*滚动条空白部分的颜色*/
    scrollbar-shadow-color: #999; /**//*立体滚动条阴影的颜色*/
    scrollbar-darkshadow-color: #666; /**//*立体滚动条强阴影的颜色*/
    scrollbar-track-color: #666; /**//*立体滚动条背景颜色*/
    scrollbar-base-color: #f8f8f8; /**//*滚动条的基本颜色*/
  }
</style>
页面中调用代码：

<Select
        v-model="valut"
        placeholder="--请选择--"
        :options="arr"  //option显示的值
        item-key="value" //绑定元素的关键字
></Select>

第一次自定义组件时需要注意的问题：
1、不知道引用组件时的默认值如何传过去？
父组件的v-model绑定的值到子组件中使用value即可接收。
2、子组件的值实时传回到父组件的valut中？

watch:{
  value(val){
    this.curValue = val;
  }
},
监听页面的值，value一改变就要传值给curValue,

this.$emit('input',this.curValue);
利用emit把子组件的值传回引用页面。