<template>
    <div class="select-area">
        <van-checkbox-group v-model="result">
            <van-checkbox name="a">複選框 a</van-checkbox>
            <van-checkbox name="b">複選框 b</van-checkbox>
            <van-checkbox name
 
="c">複選框 c</van-checkbox>
        </van-checkbox-group>
    </div>
</template>

<script>
/**  @description:雙向繫結  **/
export default {
    props: {
        // 元件實現雙向繫結
        value: {
            type: Array,
            default() {
                return []
            },
        },
    },
 

    computed: {
        result: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
}
</script>

<!-- 子元件Model -->

<template>
    <div> <input :value="value"
 
 @input="handlerChange" /> </div>
</template>

<script>
/**  @description:input實現雙向繫結  **/
export default {
    props: ['value'],
    // 可以修改事件名，預設為 input
    model: {
        event: 'updateValue',
    },
    methods: {
        handlerChange(e) {
            this.$emit('updateValue', e.target.value)
        },
    },
}
</script>

父元件引用
<template>
    <div class="home">
        <Model v-model="value" />
        {{ value }}
        <SelectArea v-model="result" />
        {{ result }}
    </div>
</template>

<script>
import Model from '@/components/demo/Model'
import SelectArea from '@/components/demo/SelectArea'

export default {
    components: {
        Model,
        SelectArea,
    },
    data() {
        return {
            value: 1,
            result: [],
        }
    },
}
</script>

效果圖