JS篇 - vue節 - 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
    }
})

閹割版代碼 >>