JS篇vue节vue实现递归树

前言

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

原理

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

官方阉割版代码

HTML代码


class="item"
:model="treeData">



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
}
})

阉割版代码 >>