vue封装一个单选框组件,可以传值
时间: 2023-08-31 15:40:18 浏览: 47
好的,下面是一个基于 Vue 的单选框组件实现,可以通过 `options` 和 `value` 属性来设置选项和选中的值:
```vue
<template>
<div>
<label v-for="option in options" :key="option.value">
<input type="radio" :value="option.value" :checked="value === option.value" @change="handleChange(option.value)">
{{ option.label }}
</label>
</div>
</template>
<script>
export default {
props: {
options: {
type: Array,
required: true
},
value: {
type: String,
required: true
}
},
methods: {
handleChange(newValue) {
this.$emit('input', newValue);
}
}
}
</script>
```
在该组件中,我们使用 `v-for` 来循环渲染每个选项,并根据 `value` 属性来确定当前选中的选项。当用户选择某个选项时,我们会触发 `@change` 事件,并将新的选项值通过 `$emit` 方法传递出去。
你可以在父组件中使用该组件,并通过 `v-model` 指令来绑定选中的值,示例代码如下:
```vue
<template>
<div>
<radio-button :options="options" v-model="selectedOption" />
</div>
</template>
<script>
import RadioButton from './RadioButton.vue';
export default {
components: {
RadioButton
},
data() {
return {
options: [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' },
],
selectedOption: 'option1'
};
}
}
</script>
```
在上述示例中,我们将选项数组和选中的值都定义在了父组件的 `data` 中,并将 `selectedOption` 绑定到 `RadioButton` 组件的 `v-model` 上,从而实现了父子组件之间的双向数据绑定。当用户选择某个选项时,`selectedOption` 的值会自动更新,反之亦然。