封装一个可以在父组件用v-model的原生select组件
首先，我们需要创建一个自定义的原生Select组件，然后在父组件中使用v-model进行双向绑定。
1. 创建自定义Select组件(CustomSelect.vue):
```html
<template>
<select :value="value" @change="onChange">
<option v-for="(option, index) in options" :key="index" :value="option.value">
{{ option.label }}
</option>
</select>
</template>
<script>
export default {
props: {
value: {
type: [String, Number],
required: true
},
options: {
type: Array,
default: () => []
}
},
methods: {
onChange(event) {
this.$emit('input', event.target.value);
}
}
};
</script>
```
2. 在父组件中使用自定义Select组件(ParentComponent.vue):
```html
<template>
<div>
<custom-select v-model="selectedValue" :options="options"></custom-select>
</div>
</template>
<script>
import CustomSelect from './CustomSelect.vue';
export default {
components: {
CustomSelect
},
data() {
return {
selectedValue: '',
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' }
]
};
}
};
</script>
```
这样，我们就创建了一个可以在父组件用v-model的原生select组件。
免责声明：
以上内容除特别注明外均来源于网友提问，创作工场回答，未经许可，严谨转载。