vue 组件嵌套
组件可以嵌套组件
组件可以嵌套自身组件，然后可以用递归思想来做
比如过树形菜单的时候，可以循环嵌套自身组件，知道没有子元素
列子
<body>
<div id="app">
<m-tree :data="treeList"></m-tree>
</div>
</body>
<script>
Vue.component("m-tree-list",{
props:{
data:{
type:Array,
defualt:[]
},
increment:{
type:Number,
default:0
}
},
computed:{
count(){
var c = this.increment;
return ++c;
},
stylePadding(){
return {
'padding-left':this.count*16+'px'
}
}
},
template:`
<ul>
<li v-for="item of data">
<div class="tree-title" :style="stylePadding" >
<span><strong>{{item.title}}</strong> <i class="ico"></i></span>
</div>
<m-tree-list
v-if="item.chidren"
:increment="count"
:data="item.chidren"
>
</m-tree-list>
</li>
</ul>
`
})
Vue.component("m-tree",{
props:{
data:{
type:Array,
defualt:[]
}
},
template:`
<div class="tree-menu-comm tree-menu">
<m-tree-list :data="data"></m-tree-list>
</div>
`
})
var data = [{
title: "目录",
chidren: [{
title: "我的音乐",
chidren: [{
title: "周杰伦",
chidren: [{
title: "发如雪"
}]
}, {
title: "王杰",
chidren: [{
title: "一场游戏一场梦"
}]
}]
}, {
title: "我的照片"
}]
}];
new Vue({
el:"#app",
data:{
treeList:data
}
})
</script>
