Vue自定义单选框组件v-model无法更新绑定值，求排查错误

你的单选框组件无法正确更新form.date的核心原因有三个：

1. Prop命名冲突 #

Vue2中，组件上的v-model默认会把父组件的绑定值传给子组件的value prop，同时监听input事件更新父组件值。但你把value prop同时用作单选框的选项值，导致父组件的绑定值和子组件的选项值混在一起，完全打乱了匹配逻辑。

2. 未绑定原生Radio的选中状态 #

你的组件没有给原生<input type="radio">绑定checked属性，无法根据父组件的v-model值同步选中状态，也无法正确触发状态变更。

3. 类型定义不匹配 #

组件的value prop被定义为String类型，但使用时传入的是布尔值true/false，Vue会进行隐式类型转换，导致值匹配失败。

修复后的组件代码 #

<template>
  <input
    :id="id"
    ref="radio"
    type="radio"
    :name="name"
    :checked="value === optionValue"
    @change="$emit('input', optionValue)"
  />
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'InputRadio',
  components: { HeadingS }, // 若未使用HeadingS可直接删除
  props: {
    id: {
      type: String,
      default: 'radio',
    },
    // 接收v-model绑定的父组件值
    value: {
      type: [Boolean, String],
      default: undefined,
    },
    name: {
      type: String,
      default: undefined,
    },
    // 当前单选框的选项值，重命名避免与v-model的value冲突
    optionValue: {
      type: [Boolean, String],
      required: true,
    },
  },
})
</script>

修改后的组件使用方式 #

<InputRadio
  :id="'false'"
  v-model="form.date"
  :name="'date'"
  :option-value="false"
/>
<InputRadio
  :id="'true'"
  v-model="form.date"
  :name="'date'"
  :option-value="true"
/>

关键修复点说明 #

• 把单选框的选项值prop重命名为optionValue，彻底避免与v-model默认的value prop冲突。
• 通过:checked="value === optionValue"实现父组件值与单选框选中状态的同步。
• 调整value和optionValue的类型为[Boolean, String]，同时支持布尔值和字符串类型，适配你的使用场景。
• 触发change事件时，emit当前单选框的optionValue，确保父组件的v-model值被正确更新。

内容的提问来源于stack exchange，提问作者El Hombre Sin Nombre