Custom encapsulation drop-down component

<template>
  <div class="select-wrap">
    <div class="select" @click="selectShow">
      {
   { name }} ▼
      <div class="select-show" v-show="show">
        <div class="select-item" v-for="(item, index) in data" :key="index" @click="selectItem(index)" >
          {
   { item }}
        </div>
      </div>
    </div>
  </div>
</template>

<script> export default {
       props: {
       //  Drop down list data  data: {
       type: Array, default: [], }, selectedName: {
       type: String, default: "", }, }, watch: {
       //  Default selected name  selectedName(val) {
       this.name = val; }, }, data() {
       return {
       name: this.selectedName, show: false, }; }, methods: {
       //  Expand the list  selectShow() {
       this.show = !this.show; }, selectItem(index) {
       this.name = this.data[index]; }, }, }; </script>

<style scoped> .select {
       cursor: pointer; position: absolute; top: 50px; right: 50px; width: 110px; height: 31px; background: #2a3c5a; display: flex; justify-content: center; align-items: center; color: #fff; z-index: 1000; } .select-show {
       position: absolute; background: #2a3c5a; display: flex; justify-content: center; align-items: center; color: #fff; top: 34px; left: 0; display: flex; flex-direction: column; } .select-item {
       right: 50px; width: 110px; height: 31px; display: flex; align-items: center; justify-content: center; border: 1px solid #4a73a6; } </style>

 Child components 

    <Select :selectedName=" Zhejiang Province " :data="placeData" ></Select>
    <Select :selectedName="timeData[0]" :data="timeData" style="position: absolute; top: 0px; right: 130px" ></Select>

data(){
    
return{
    
      timeData: ["2022", "2021", "2020"],
      placeData: [
        " Zhejiang Province ",
        " hangzhou ",
        " Ningbo City ",
        " Wenzhou City ",
        " Huzhou City ",
        " Jiaxing City ",
        " Shaoxing City ",
        " Jinhua City ",
        " Quzhou City ",
        " Zhoushan City ",
        " Taizhou City ",
        " Lishui City ",
      ],
}
}