用vue写一个单选按钮的组件 并绑定在父组件

在Vue中，可以使用v-model指令将一个自定义的单选按钮组件绑定到父组件中。

首先，创建一个单选按钮组件，命名为RadioButton：

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

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      selectedOption: this.value
    }
  },
  watch: {
    selectedOption(newValue) {
      this.$emit('input', newValue)
    }
  }
}
</script>

在上述代码中，我们使用props来接收父组件传递的选项数组和初始值，并在data中定义一个selectedOption用于保存当前选中的选项。然后，使用v-for指令在模板中循环渲染单选按钮，并使用v-model指令将其绑定到selectedOption上。在watch中，当selectedOption发生变化时，使用$emit方法触发一个input事件，并传递新的选项值。

接下来，在父组件中使用RadioButton组件并绑定到父组件的数据：

<template>
  <div>
    <radio-button :options="['Option 1', 'Option 2', 'Option 3']" v-model="selectedOption"></radio-button>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

export default {
  components: {
    RadioButton
  },
  data() {
    return {
      selectedOption: 'Option 1'
    }
  }
}
</script>

在上述代码中，我们在父组件的模板中使用RadioButton组件，并通过options属性传递选项数组。然后，使用v-model指令将selectedOption绑定到RadioButton组件上。最后，我们在父组件中显示当前选中的选项。

这样，我们就创建了一个单选按钮的组件，并成功地将其绑定到父组件中