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

在Vue中，可以使用v-model指令来实现父子组件之间的数据绑定。下面是一个用Vue写的单选按钮的子组件，以及如何在父组件中使用它：

子组件RadioButton.vue：

<template>
  <div>
    <input type="radio" :id="id" :value="value" v-model="selectedValue">
    <label :for="id">{{ label }}</label>
  </div>
</template>

<script>
export default {
  props: {
    id: String,
    value: String,
    label: String
  },
  computed: {
    selectedValue: {
      get() {
        return this.$parent.selectedValue;
      },
      set(value) {
        this.$parent.selectedValue = value;
      }
    }
  }
}
</script>

父组件App.vue：

<template>
  <div>
    <radio-button id="option1" value="option1" label="Option 1"></radio-button>
    <radio-button id="option2" value="option2" label="Option 2"></radio-button>
    <radio-button id="option3" value="option3" label="Option 3"></radio-button>
    <p>Selected value: {{ selectedValue }}</p>
  </div>
</template>

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

export default {
  components: {
    RadioButton
  },
  data() {
    return {
      selectedValue: ''
    };
  }
}
</script>

在上述代码中，子组件RadioButton接收id、value和label作为props，然后在模板中渲染一个单选按钮和一个标签。通过v-model指令绑定到selectedValue计算属性上，以实现与父组件的数据绑定。

在父组件App中，引入子组件RadioButton，并在模板中使用它三次，分别传入不同的id、value和label。selectedValue作为父组件的数据，用于显示选中的值