vue组件递归

刚才写了篇《element多层导航菜单》文章，顺便也写写其中核心原理

其实没啥好说就是组件递归，这里呢简单写个例子，

面试被问到的时候直接拿来手写代码也行，

有看到本文章的同学可以复制代码去试试

没多少代码量，主要是让还没懂组件递归的同学好理解

核心就这个，组件自己调用自己：

 

 // ====== 组件： ==================

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<template>   <ul>     <li v-for="(item,index) in list " :key="index">       <p>{{item.name}}</p>       <treeMenus :list="item.children"></treeMenus>     </li>   </ul> </template> <script> export default {   name: "treeMenus",   props: {     list: Array   } }; </script> <style>     ul {     padding-left: 20px !important;     } </style>

 

// ====== 调用： ==================

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<!-- html调用 --> <treeMenus :list="treeMenusData"></treeMenus>     treeMenusData: [ // 数据格式   {     name: "菜单1",     children: [       {         name: "菜单1-1",         children: []       }     ]   } ]

 效果图：