SOURCE

console 命令行工具 X clear

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