Vue 父子组件checkbox-group值同步

子组件中有一个checkbox-group需要与父组件中的变量同步，关键代码如下：

1. 父组件：父组件中引入子组件，并设置好供子组件调用的方法

import scene from "@/components/form/scene.vue";    
    export default {
        data() {
            return {
                editMode: true,
                form: {
                    scenes: ["aaa", "bbb"],                    
                },
        },
        //注册组件
        components: {
            scene
        },
        methods: {
            setScenes(val) {
                this.form.scenes = val.scenes;                
                console.log(this.form.scenes)
            },
        }
  }

<scene :scenes=form.scenes :editAble=editMode @setScenes="setScenes($event)"></scene>

2. 子组件：子组件中关键是computed中的sscenes变量的set和get方法。
   get方法好理解，当使用sscenes时读取其值，返回的始终是父组件中的对应值。JSON.parse(JSON.stringify(this.scenes))能保证读取到合法的值。
   set方法中，当子组件中sscenes值改变，即子组件中checkbox-group被点击时，触发set方法，但此时并不改变子组件中sscenes的值，而是通知父组件更新父组件中scenes的值。而使用子组件中sscenes的值时，触发get方法，得到的是更新后的父组件中的scenes的值。

<template>
    <div class="eventDate">
        <el-card class="box-card" @blur="blur">
            <el-form-item label="发生地点" icon="el-icon-warning"
                :rules='[{ required: true, message: "请选择发生地点", trigger: "blur" } ] '>
                <el-checkbox-group v-model="sscenes">
                    <el-checkbox label="aaa"></el-checkbox><br>
                    <el-checkbox label="bbb"></el-checkbox><br>
                    <el-checkbox label="ccc"></el-checkbox>                    
                </el-checkbox-group>
            </el-form-item>
        </el-card>
    </div>
</template>
<script>
    //发生地点
    export default {
        name: 'scenes',
        props: ['scenes', 'editMode'],
        computed: {
            sscenes: {
                get() {
                    return JSON.parse(JSON.stringify(this.scenes))  //只取其值，两者是两个不同的对象
                },
                set(val) {
                    console.log(val)
                    this.$emit('setScenes', {             //因其他业务需要，这里上传一个对象
                        scenes: val,
                        otherScence: this.otherScence
                    });
                }
            }
        },
    }
</script>

3. 参考链接