Vue组件单选按钮互斥失效及指定方法修改咨询

错误根源 #

1. Props直接修改违规：你在两个变更方法里直接给isCheckedRadioButtonShowGeoTIFFOverlayForTS1这类Props赋值，Vue的Props是单向数据流，子组件不能直接修改父组件传递的Props，这会触发Proxy拦截报错。
2. 单选按钮逻辑冗余：用两个独立的状态变量控制单选按钮，没有利用单选按钮原生的互斥特性（相同name属性），导致状态同步逻辑复杂且易出错。

最优修改方案（重构逻辑，符合Vue规范） #

1. 简化模板，利用单选按钮原生互斥性 #

给两个单选框设置相同name，并用单个v-model控制状态，去掉冗余的checked绑定：

<template>
    <div id="idDivGeoTIFFOverlaySettingsRadioButtonMainLayoutContainer" v-show="isShowGeoTIFFOverlaySettingsRadioButtonMainLayoutContaine">
        <cds-radio id="idRadioBtnShowGeoTIFFOverlayContainer">
            <label id="idText">{{ tempTextOn }}</label>
            <input
                type="radio"
                name="geoTIFFOverlayToggle"
                :value="true"
                v-model="overlayToggle"
                :disabled="isRadioButtonShowGeoTIFFOverlayForTS1Disabled"
                @change="onOverlayToggleChanged"
            />
        </cds-radio>

        <cds-radio id="idRadioBtnHideGeoTIFFOverlayContainer">
            <label id="idText">{{ tempTextOff }}</label>
            <input
                type="radio"
                name="geoTIFFOverlayToggle"
                :value="false"
                v-model="overlayToggle"
                :disabled="isRadioButtonHideGeoTIFFOverlayForTS1Disabled"
                @change="onOverlayToggleChanged"
            />
        </cds-radio>
    </div>
</template>

2. 调整Props与Computed，简化状态管理 #

删除冗余的双状态Props，改用单个Props控制开关：

props: {
    isShowGeoTIFFOverlaySettingsRadioButtonMainLayoutContaine: {
        type: Boolean,
        default: true,
    },
    isRadioButtonShowGeoTIFFOverlayForTS1Disabled: {
        type: Boolean,
        default: true,
    },
    isRadioButtonHideGeoTIFFOverlayForTS1Disabled: {
        type: Boolean,
        default: true,
    },
    // 单个状态Props，替代原有的两个VModel和isChecked属性
    modelValue: {
        type: Boolean,
        required: true
    },
},
emits: ['update:modelValue'],
computed: {
    overlayToggle: {
        get() {
            return this.modelValue;
        },
        set(value) {
            this.$emit('update:modelValue', value);
        },
    },
},

3. 合并方法，简化逻辑 #

只保留一个方法处理状态变更：

methods: {
    onOverlayToggleChanged() {
        // 如需额外逻辑（如日志、联动操作），在这里添加
        console.log('GeoTIFF 覆盖层状态切换为:', this.overlayToggle);
    },
},

4. 父组件使用方式 #

父组件通过v-model绑定状态即可：

<GeoTIFFOverlaySettingsTS1RadioButtons
    v-model="isGeoTIFFOverlayVisible"
    :isRadioButtonShowGeoTIFFOverlayForTS1Disabled="yourShowDisabledState"
    :isRadioButtonHideGeoTIFFOverlayForTS1Disabled="yourHideDisabledState"
/>

快速修复方案（不重构，仅解决报错） #

如果暂时不想重构，只需修改原方法，删除直接修改Props的代码，改为通过emit通知父组件更新：

methods: {
    onShowGeoTIFFOverlayChanged() {
        this.compPropsVModelShowGeoTIFFOverlayForTS1 = true;
        this.compPropsVModelHideGeoTIFFOverlayForTS1 = false;
        // 替换直接赋值，改为emit事件让父组件更新状态
        this.$emit('update:isCheckedRadioButtonShowGeoTIFFOverlayForTS1', true);
        this.$emit('update:isCheckedRadioButtonHideGeoTIFFOverlayForTS1', false);
    },
    onHideGeoTIFFOverlayChanged() {
        this.compPropsVModelShowGeoTIFFOverlayForTS1 = false;
        this.compPropsVModelHideGeoTIFFOverlayForTS1 = true;
        // 同样替换为emit事件
        this.$emit('update:isCheckedRadioButtonShowGeoTIFFOverlayForTS1', false);
        this.$emit('update:isCheckedRadioButtonHideGeoTIFFOverlayForTS1', true);
    },
},

同时在emits中新增对应事件：

emits: {
    'update:VModelShowGeoTIFFOverlayForTS1': null,
    'update:VModelHideGeoTIFFOverlayForTS1': null,
    'update:isCheckedRadioButtonShowGeoTIFFOverlayForTS1': null,
    'update:isCheckedRadioButtonHideGeoTIFFOverlayForTS1': null,
},

父组件需要用v-model绑定这两个状态：

<GeoTIFFOverlaySettingsTS1RadioButtons
    v-model:isCheckedRadioButtonShowGeoTIFFOverlayForTS1="showChecked"
    v-model:isCheckedRadioButtonHideGeoTIFFOverlayForTS1="hideChecked"
    <!-- 其他Props -->
/>

注：快速修复方案仍存在逻辑冗余，推荐使用第一种重构方案，更符合Vue数据流规范和单选按钮的原生特性。

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