Subcomponent =>
<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>
Parent component =>
<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>
Attribute:
optionList: the content in the drop-down menu
value: the content displayed in the drop-down menu when the page is opened
Method:
change: get the value in the drop-down menu