下拉菜单组件的封装？？

子组件=>

<template>
  <div>
    <select v-model="currentValue" @change="changeValue">
      <option>{
   
   {value}}</option>
      <option v-for="(item, index) in optionList" :value="item" :key="index">{
   
   {item}}</option>
    </select>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "Sel",
  props: {
    value: {
      type: [String, Object, Boolean, Number],
      default: "---please select---"
    },
    optionList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      currentValue: ""
    };
  },
  mounted() {
    this.currentValue = this.value;
  },
  methods: {
    changeValue() {
      this.$emit("change", this.currentValue);
    }
  }
};
</script>

<style lang="scss">
select {
  width: 75%;
  height: 40px;
  background-color: transparent;
  border-radius: 20px;
  outline: none;
  padding: 0 20px;
  margin-left: 10px;
  display: block;
  margin-top: 10px;
  option {
    border: 1px solid #ccc;
  }
}
</style>

父组件=>

<template>
  <div class="home">
       <Sel :optionList="optionList" :value="value" @change="getContent"></Sel>
  </div>
</template>

<script>
import Sel from "@/components/select/select.vue";
export default {
  name: "Home",
  components: {
    Sel
  },
data() {
    return {
      optionList:["下拉内容1","下拉内容2","下拉内容3","下拉内容4","下拉内容5","下拉内容6"],
      value:"请选择地址"
    };
  },
methods: {
   getContent(data){
      console.log(data)
    },
  }
};
</script>

属性：
optionList:下拉菜单里面的内容
value:打开页面时下拉菜单显示的内容
方法：
change：获取到下拉菜单里面的值