父組件向子組件傳遞子組件需要雙向綁定對象

問題場景

子組件表單素綁定了一個v-model對象，這個對象需要從父組件傳入，父組件在傳入這個參數后，頁面上操作表單元素報錯。比如說一個單選按鈕的子組件，雙向綁定的對象由父組件傳入，頁面上點擊單選按鈕選擇狀態不能保持且控制臺報錯：

子組件ButtonGroup：

<template>
    <div>
        <Card :label="label" icon>
            <RRadioGroup class="flex-wrap grid" v-model:modelValue="bindModel" button size="middle">
                <div class="grid-column" v-for="item in products" :key="item.type">
                    <RRadio block :label="item.type" name="radarRadioGroup">{{ item.name }}
                    </RRadio>
                </div>
            </RRadioGroup>

        </Card>
    </div>
</template>

<script lang="ts">
import {
    computed,
    defineComponent,
    PropType,
    watch,
    ref,
    onMounted,
    reactive,
    toRef,
    toRefs,
} from 'vue';
import RCheckbox from '@/components/common/Checkbox/checkbox.vue';



export default defineComponent({
    name: 'ButtonGroup',
    components: { RCheckbox },
    props: {
        products: {
            type: Array as PropType<any>,
            default: [],
        },
        bindModel: {
            type: String,
            default: '',
        },
        label: {
            type: String,
            default: '',
        },
    },
    setup(props) {
       
        return {};
    },
});
</script>

<style lang="scss" scoped>
@import '@/styles/modules/index.scss';

</style>

<template>
    <div>
        <Card label="多源觀測設備" icon>
            <ButtonGroup :bind-model="rainModel" :products="rain_data.options"></ButtonGroup>

        </Card>
    </div>
</template>

<script lang="ts">
import {
    computed,
    defineComponent,
    PropType,
    watch,
    ref,
    onMounted,
} from 'vue';


export default defineComponent({
    name: 'Echo',
    components: { RCheckbox, ButtonGroup },
    computed: {
        ...mapState(useProductStore, {
            // testRadars: (store) => store.products.filter((item) => item.band === 'X'),
            XCRProfiles: (store) => {
                const menus = store.products.filter(
                    (item) => item.menuGroup === 'XCRProfile',
                );
                return menus;
            },
        }),
    },
    props: {
        // label: {
        //     type: String,
        //     default: '',
        // },
        // products: {
        //     type: Array as PropType<any>,
        //     default: [],
        // },
        // type: {
        //     type: String,
        //     default: '',
        // },
        // step: {
        //     type: Number,
        //     default: 1,
        // },
        // model: {
        //     type: String,
        //     default: '',
        // },
        // bilinear: {
        //     type: Boolean,
        //     default: false,
        // },
    },
    setup(props) {
        const model = ref('')
        
        return {
            model
        };
    },
});
</script>

<style lang="scss" scoped>
@import '@/styles/modules/index.scss';

</style>

問題分析：由于子組件的v-model雙向綁定的響應式變量是父組件傳入的，子組件不能直接使用，需要把這個雙向綁定的響應式變量轉換成子組件的雙向綁定的響應式變量。把父組件傳入的變量在子組件中用reactive套一層（用toRef套不行！），修改后子組件代碼如下：

<template>
    <div>
        <Card :label="label" icon>
            <RRadioGroup class="flex-wrap grid" v-model:modelValue="model" button size="middle">
                <div class="grid-column" v-for="item in products" :key="item.type">
                    <RRadio block :label="item.type" name="radarRadioGroup">{{ item.name }}
                    </RRadio>
                </div>
            </RRadioGroup>

        </Card>
    </div>
</template>

<script lang="ts">
import {
    computed,
    defineComponent,
    PropType,
    watch,
    ref,
    onMounted,
    reactive,
    toRef,
    toRefs,
} from 'vue';
import RCheckbox from '@/components/common/Checkbox/checkbox.vue';



export default defineComponent({
    name: 'ButtonGroup',
    components: { RCheckbox },
    props: {
        products: {
            type: Array as PropType<any>,
            default: [],
        },
        bindModel: {
            type: String,
            default: '',
        },
        label: {
            type: String,
            default: '',
        },
    },
    setup(props) {
        const  v = reactive({
            model:props.bindModel
        })
        // const model = toRef(props,"bindModel")



        return {
            ...toRefs(v)
        };
    },
});
</script>

<style lang="scss" scoped>
@import '@/styles/modules/index.scss';
</style>