Vuetify单选框组组件：如何像文本框一样与父组件v-model优雅绑定

嘿，我懂你想要的那种和文本框一样简洁的v-model绑定方式——其实你的思路已经踩对了核心逻辑，只是差一点点就能让Radio组件和Text组件保持完全一致的优雅写法。

问题本质梳理 #

Vue的v-model本质就是**value属性 + input事件**的语法糖，你的Text组件已经完美贴合这个规则，而Radio组件其实只需要调整一点点，就能实现和Text组件一模一样的双向绑定效果，完全不需要额外的change事件处理。

修正后的Radio组件实现 #

把你的Radio.vue改成下面这样，就能直接和父组件的v-model无缝绑定了：

<template>
  <v-radio-group 
    :value="value" 
    @input="$emit('input', $event)"
  >
    <v-radio value="one" label="One"></v-radio>
    <v-radio value="two" label="Two"></v-radio>
  </v-radio-group>
</template>

<script>
export default {
  props: ['value'] // 必须声明接收value属性，这是v-model双向绑定的核心前提
}
</script>

为什么这样就能生效？ #

• 父组件的v-model="radioVal"会自动把radioVal的当前值传递给Radio组件的value属性，实现数据从父到子的传递
• 当用户选中单选框时，v-radio-group会触发input事件并携带选中的value值
• 我们通过$emit('input', $event)把选中值传回父组件，Vue会自动更新radioVal的值，完成子到父的数据同步

这样你的父组件代码完全不需要修改，保持原来的简洁写法即可：

<Text v-model="textVal"></Text>
<Radio v-model="radioVal"></Radio>

额外小贴士 #

• 确保父组件中radioVal的初始值类型和单选框的value类型一致（比如都是字符串），避免因为类型不匹配导致绑定失效
• 如果你的Vuetify版本有特殊事件逻辑，可以核对下v-radio-group的官方文档，确认它的事件触发名称确实是input（绝大多数版本都是符合这个规则的）

这样就实现了和文本框完全一致的优雅绑定方式，不用再额外写change事件处理啦！

内容的提问来源于stack exchange，提问作者Brendan