1、Select.vue

<template>
  <div>
    <button @click="change" >{{curselect}}</button>
    <ul class="list" v-if="selectShow">
      <li v-for="item of currentList" @click="changeselect(item)" >{{item}}</li>
    </ul>
  </div>
</template>

<style scoped>
  li{list-style-type:none;}
  li:hover{ background-color: aquamarine}
  button{border:0px;background-color:transparent;}

</style>

<script>
  import Select from './Select.js';
  export default Select;
</script>
   

2、Select.js

export default {
  name: 'HdSelect',
  data(){
    return{
      currentList:[],
      selectShow:false,
      curselect:''
    }
  },

  props:{
    list:{
      type:Array,
      default:[]
    }
  },

  watch:{
    data: function () {
      this.makeList();
    }
  },

  methods:{
    makeList(){
      this.currentList = this.list
      this.curselect = this.list[0]
    },
    change(){
      this.selectShow = !this.selectShow
    },
    changeselect(index){
      this.curselect = index;
      this.selectShow = false;
    },
  },

  mounted:function(){
    this.makeList();
  }
}

index.js

import mySelect from './Select.vue';
const HdSelect = {
  install:function(Vue){
    Vue.component('HdSelect',mySelect)
  }
}

export default HdSelect;