js里面有遞歸算法，同時，我們也可以利用props來實現vue模板的遞歸調用，但是前提是組件擁有 name 屬性

父組件:slotDemo.vue:

<template><div><!-----遞歸組件-----><ul><simple3 :tree="item" v-for="item in tree"></simple3></ul></div> </template> <style lang="stylus" rel="stylesheet/stylus">lipadding-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">.test2list-style disc.test3list-style decimal </style> <script>export default{name: "simple3",props: ["tree"]} </script>

　　

上面是一個子組件，定義了 name 為 simple03，然后在模板中調用自身，結合 v-for 實現遞歸

為了防止出現死循環，在調用自身的時候，加入了 v-if 作為判定條件

父組件中調用的時候，需要通過 props 傳入一個 tree;

為了對每一級菜單有所區分，我對tree里面的每一個子集合里面加了一個test字段來區分是哪一級的菜單然后對其不同的樣式進行處理

最后的效果：

?

轉載于:https://www.cnblogs.com/mmykdbc/p/8037995.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的vue的递归组件以及三级菜单的制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。