vue select自定义组件动态列表

-------------------------------HelloWorld.vue---------------

<template>
  <div>
    <myAssemblys
      :selectty="selectty"
      :selectdVal="selectdVal"
     ></myAssemblys>
    <button @click="setType(1)">类型1</button>
    <button @click="setType(2)">类型2</button>
  </div>
</template>
<script>
  import myAssemblya from '@/components/myAssembly'
  // import Vue from 'vue'
  export default {
    data () {
      return {
        selectty:0,
        selectdVal:'b',
      }
    },
    components: {
      myAssemblys: myAssemblya
    },

    methods: {
      setType (ty) {
            this.selectty=ty;
      },

    },
  }
</script>
<style>

</style>

-------------------------------select组件--myAssembly.vue---------------

<template>
  <div class="show">
    <h1>选择的值: {{selectdVal}}</h1>
    <h1>选择的类型: {{selectty}}</h1>
    </p>
    <select v-model="selectdVal" name="fruit">
      <option v-for="(item,index) in basetable" :key="index" :value="item.value">{{item.name}}</option>
    </select>
  </div>
</template>
<script>
  let basetables =
    [
      {value: 'a', name: 'va'},
      {value: 'b', name: 'vb'},
      {value: 'c', name: 'vc'},
      {value: 'd', name: 'vd'}
    ]

  export default {
    props: {
      selectty: Number,
      selectdVal: '',
    },
    data () {
      return {
        basetable:JSON.parse(JSON.stringify(basetables)) ,
      }
    },
    methods: {
      f1 () {
      }
    },

    watch: {
      selectty: function (val) {
        this.selectdVal = 'b' + val
        //循环操作
        this.basetable.map(function(value,index,array){
          value.value = basetables[index].value + val
          value.name = basetables[index].name + val
        })

      },

    }

  }
</script>
<style scoped>
  .show {
    background-color: #42b983;
  }

</style>

 

-------------------------------------------效果---------------------