console
var data=[
{label:'nam1',id:'1'},
{label:'nam2',id:'2',items:[{label:'nam1',id:'1'}]},
{label:'nam3',id:'3',items:[
{label:'nam6',id:'6'},
{label:'nam7',id:'7'},
{label:'nam8',id:'8'}
]},
{label:'nam4',id:'4'},
{label:'nam5',id:'5'}
];
Vue.component('MyComponent',{
template:'#menu',
props:['data'],
data:function(){
return {
'isOpen':true
}
},
methods:{
open:function(){
console.log(111)
}
}
});
new Vue({
el:'#demo',
data:{
data:data
}
})
<template id="menu">
<ul>
<slot name="item"
v-for="item in data"
:label="item.label"
:id="item.id"
:items="item.items"
:isOpen="isOpen"
></slot>
</ul>
</template>
<div id="demo">
<my-component :data="data">
<template slot="item" scope="props">
<li><a :href="'#'+props.id">{{props.label}}</a>
<my-component v-if="props.items " :data="props.items">
<template slot="item" scope="v">
<li><a :href="'#'+v.id">{{v.label}}</a>
</template>
</my-component>
</li>
</template>
</my-component>
</div>