Quasar Vue3子组件q-radio选中值无法同步父组件解决方案

和传3个选项值的写法没关系，是两处基础绑定错误导致功能失效：

• q-radio属性传反了：Quasar的单选组件规则是val传当前单选项自身的取值，model-value绑定当前选中的全局状态，你把两个属性的传值完全写反了。
• 子组件没有实现v-model的更新逻辑：Vue遵循单向数据流，子组件不能直接修改父组件传入的props，你没在选中状态变化时通知父组件更新值，选的时候父组件的状态不会变，自然切不了选项。另外父组件同时写:value="choice"和v-model="choice"属于重复绑定，v-model本身已经包含值绑定逻辑，多写的属性没有意义还容易引发冲突。

1. 修正子组件代码 #

调整属性绑定顺序，补充v-model对应的更新事件逻辑：

<template>
  <div class="row content-center justify-around">
    <div>
      <q-radio
        :val="'walking'"
        :model-value="modelValue"
        @update:model-value="handleChange"
      />
      <q-icon name="directions_walk"/>
    </div>
    <div>
      <q-radio
        :val="'cycling'"
        :model-value="modelValue"
        @update:model-value="handleChange"
      />
      <q-icon name="directions_bike"/>
    </div>
    <div>
      <q-radio
        :val="'driving'"
        :model-value="modelValue"
        @update:model-value="handleChange"
      />
      <q-icon name="directions_car" />
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue"

export default defineComponent({
  name: "TravelChoice",
  // Vue3 默认v-model对应的prop名是modelValue
  props: {
    modelValue: {
      type: String,
      required: true
    }
  },
  emits: ["update:modelValue"],
  setup(props, { emit }) {
    const handleChange = (newVal) => {
      // 选中变化时通知父组件更新状态
      emit("update:modelValue", newVal)
    }
    return { handleChange }
  }
})
</script>

2. 简化父组件代码 #

删除重复的value绑定，只保留v-model即可：

<template>
  <TravelChoice v-model="choice" />
</template>

<script>
  import { defineComponent, ref } from "vue"
  import TravelChoice from "components/button/TravelChoice.vue"

  export default defineComponent({
    name: "Home",
    components: {
      TravelChoice
    },
    setup() {
      return {
        choice: ref("walking")
      }
    },
    watch: {
      choice(val){
        console.log(val)
      }
    }
  })
</script>

• Quasar的q-radio是单选组子项，val固定传当前选项的唯一标识值，model-value绑定整个单选组的当前选中结果，不要写反两个属性的传值。
• Vue3中组件默认v-model的绑定规则是：传入prop名为modelValue，状态更新时触发update:modelValue事件，不需要额外改配置适配旧版Vue2的value prop规则，用默认约定兼容性最好。

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