-------------------------------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>
-------------------------------------------效果---------------------