vue的递归组件以及三级菜单的制作

<template>
<div>
<!-----递归组件----->
<ul>
<simple3 :tree="item" v-for="item in tree"></simple3>
</ul> </div>
</template>
<style lang="stylus" rel="stylesheet/stylus">
li
padding-left 30px
</style>
<script>
import simple3 from "./simple/simple3.vue";
export default{
data(){
return {
tree: [{
label: "一级菜单",
test:1,
children: [{
label: "二级菜单",
test:2,
children: [{
label: "三级菜单",
test:3
}]
}]
}]
}
}, components: { simple3
}
}
</script>

<template>
<li>
<a>{{tree.label}}</a>
<simple3 v-if="tree.children" :tree="item" v-for="item in tree.children" :class="item.test==2?'test2':'test3'"></simple3> </li>
</template>
<style rel="stylesheet/stylus" lang="stylus">
.test2
list-style disc .test3
list-style decimal
</style>
<script>
export default{
name: "simple3",
props: ["tree"]
}
</script>