H5九阴真经 - vue实现递归树-CSDN博客

前言

大家都知道vue只有for循环，如果一层写一个循环，显然是无法实现未知层次的数据。
对于这个问题，官方的大神早就出了一个demo来实现递归，下面来剖析下它的原理
vue官方的treeview demo >>

原理

创建一个子项的组件，这个组件内调用当前组件，实现递归

官方阉割版代码

HTML代码

<!-- 子级组件 -->
<template id="item-template">
    <li>
        <div>
            {{model.name}}
        </div>
        <!-- 组件中引用当前组件，传入下级数据 -->
        <ul>
            <item
                class="item"
                v-for="model in model.children"
                :model="model">
            </item>
        </ul>
    </li>
</template>

<!-- 父级 -->
<ul id="demo">
    <item
        class="item"
        :model="treeData">
    </item>
</ul>

js代码

// demo数据
var data = {
    name: 'My Tree',
    children: [
        { name: 'hello' },
        { name: 'wat' },
        {
            name: 'child folder',
            children: [
                {
                    name: 'child folder',
                    children: [
                        { name: 'hello' },
                        { name: 'wat' }
                    ]
                },
                { name: 'hello' },
                { name: 'wat' },
                {
                    name: 'child folder',
                    children: [
                        { name: 'hello' },
                        { name: 'wat' }
                    ]
                }
            ]
        }
    ]
}

// 定义子级组件
Vue.component('item', {
    template: '#item-template',
    props: {
        model: Object
    },
    data: function () {
        return {
        }
    },
    methods: {
    }
})


var demo = new Vue({
    el: '#demo',
    data: {
        treeData: data
    }
})

阉割版代码 >>