SOURCE

console 命令行工具 X clear

                    
>
console
    var data = {
        select: [],
        list: [{
            name: '1',
            children: [{
                name: '1-1',
                children: [{
                    name: '1-1-1',
                }]
            }]
        }, {
            name: '2',
            children: [{
                name: '2-1'
            }, {
                name: '2-2'
            }]
        }]
    };

    Vue.component('bbb', {
        // ... options ...
        props: ['data'],
        template: `
            <div style="margin-left: 30px">
            <aaa :data="data"></aaa>
</div>
        `
    })

    function calccc(list, value){
        list.forEach(data=>{
                    if (data.check) value.push(data.name)
                    if (data.children && data.children.length) calccc(data.children, value);
                })
    }

    Vue.component('ccc', {
        // ... options ...
        props: ['value', 'data'],
        watch: {
            data: {deep: true,handler:function (data){
                let value = [];
                this.calc(data, value);
                this.$emit('input', value);
            }}
        },
        methods: {
            calc: function(list, value){
        list.forEach(data=>{
                    if (data.check) value.push(data.name)
                    if (data.children && data.children.length) this.calc(data.children, value);
                })
    }
        },
        template: `
            <div>
            <aaa :data="data"></aaa>
</div>
        `
    })


    Vue.component('aaa', {
        // ... options ...
        props: ['data'],
        template: `<div >
        <div v-for="item in data">
    <input type="checkbox" v-model="item.check">{{item.name}}
    <hr>
    <bbb v-if="item.children && item.children.length" :data="item.children"></bbb>
</div>

</div>`
    })

    var vm = new Vue({
        el: '#app',
        data: data,
    })
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>


<div id="app">
    <ccc :data="list" v-model="select"></ccc>
    你选择的:
    <div v-html="select"></div>
</div>