关于 vue tree 勾选全部的疑问

Question

 引用父组件：
<vue-tree :data='routerList'></vue-tree>
子组件：
    <template>
    <ul class="vue-tree">
        <li :class="['vue-tree-li', item.type == 0 ? 'type0' :'type1']" v-for="(item, index) in data">
            <div :class="['children', !item.children ? 'forward' : '']">
                <div  :class="[item.children && item.children.length > 0 ? '' : 'forward']">
                    <span :class="[ 'arrow-right',item.show ? 'arrow-down' : '']" v-if="item.children && item.children.length > 0"></span>
                    <el-checkbox v-model="item.checked" @change="checkedBtn(item,index,data)"></el-checkbox>
                    <span @click="getTrees(item, index)" >{{item.routeName}}</span>
                </div>
            </div>
            <myTree :data='item.children' v-if='item.show'></myTree>
        </li>
    </ul>
</template>
<script>
    export default {
        name: 'myTree',
        props: ['data'],
        methods: {
            getTrees(item,index) {
                this.$set(this.data[index], 'show', this.data[index].show === undefined ? true : !this.data[index].show);
            },
            /*
             * 选中框
             */
            checkedBtn(item, index ,data){
                let itemChecked = item['checked'];
                if (item['children'] && item['children'].length){
                    for (let i in item['children']){
                        let checked = item['children'][i];
                        this.$set(this.data[index]['children'][i], 'checked', this.data[index]['children'][i]['checked'] === undefined ? true : !this.data[index]['children'][i]['checked']);
                    }
                } else {
                    if (this.data[index].checked === undefined){
                        this.$set(this.data[index], 'checked', this.data[index].checked = true);
                    } else {
                        this.$set(this.data[index], 'checked', this.data[index].checked ? true : false);
                    }
                }
            }
        }
    }
</script>

需要实现的效果是跟 http://element.eleme.io/#/zh-... 一样的效果
我现在无法做到全选和全选中后，子集取消选中，父级也需要跟着取消选中。。。

Answer 1

所有的选中控制操作都不要自己控制，全部交给props，每次选中都是通过事件上传状态，自顶向下赋值