vue中递归组件的实现方法介绍（附实例：三级菜单）
下面Vue.js教程栏目通过实例制作一个三级菜单，来介绍vue中递归组件的实现方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
js里面有递归算法，同时，我们也可以利用props来实现vue模板的递归调用，但是前提是组件拥有 name 属性
父组件:slotDemo.vue:
<template>
<p>
<!-----递归组件----->
<ul>
<simple3 :tree="item" v-for="item in tree"></simple3>
</ul>
</p>
</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>子组件：simple3.vue
<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>上面是一个子组件，定义了 name 为 simple03，然后在模板中调用自身，结合 v-for 实现递归
为了防止出现死循环，在调用自身的时候，加入了 v-if 作为判定条件
父组件中调用的时候，需要通过 props 传入一个 tree;
为了对每一级菜单有所区分，我对tree里面的每一个子集合里面加了一个test字段来区分是哪一级的菜单然后对其不同的样式进行处理
最后的效果：
相关推荐：
2020年前端vue面试题大汇总（附答案）
更多编程相关知识，请访问：编程教学！！
以上就是vue中递归组件的实现方法介绍（附实例：三级菜单）的详细内容，更多请关注其它相关文章！