组件之间双向绑定

  <!-- 子组件SelectArea -->

<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>

 效果图