脚本宝典收集整理的这篇文章主要介绍了H5九阴真经 - vue实现递归树，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

前言

大家都知道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
    }
})

阉割版代码 >>

脚本宝典总结

以上是脚本宝典为你收集整理的H5九阴真经 - vue实现递归树全部内容，希望文章能够帮你解决H5九阴真经 - vue实现递归树所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。