用vue写一个单选按钮的子组件

下面是一个用Vue写的单选按钮的子组件的示例：

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input type="radio" :value="option.value" v-model="selectedOption">
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      selectedOption: null
    }
  }
}
</script>

在父组件中使用该子组件时，可以通过options属性传递选项数组，如：

<template>
  <div>
    <radio-group :options="radioOptions"></radio-group>
  </div>
</template>

<script>
import RadioGroup from './RadioGroup.vue'

export default {
  components: {
    RadioGroup
  },
  data() {
    return {
      radioOptions: [
        { label: 'Option 1', value: 1 },
        { label: 'Option 2', value: 2 },
        { label: 'Option 3', value: 3 }
      ]
    }
  }
}
</script>

在上面的示例中，子组件RadioGroup接收一个名为options的属性，该属性是一个数组，每个元素包含一个label属性和一个value属性，分别表示选项的显示文本和值。子组件通过v-for指令将选项渲染为一组单选按钮，并通过v-model指令绑定选中的选项到selectedOption属性。

父组件中的radioOptions数组定义了三个选项，并将其传递给子组件的options属性