用Vue.js递归组件构建一个可折叠的树形菜单

在Vue.js中一个递归组件调用的是其本身，如：

 Vue.component('recursive-component', {

   template: `<!--Invoking myself!-->

              <recursive-component></recursive-component>`

 });

递归组件常用于在blog上显示注释、嵌套的菜单，或者基本上是父和子相同的类型，尽管具体内容不同。例如:

现在给您演示一下如何有效地使用递归组件，我将通过建立一个可扩展/收缩的树形菜单的来一步步进行。

数据结构

一个树状UI的递归组件将是一些递归数据结构的可视化表达。在本教程中，我们将使用树状结构，其中每个节点都是一个对象：

1. 一个 label 属性。

2. 如果它有子节点，一个 nodes 属性，则它是一个或多个节点的数组属性。

与所有树结构一样，它必须有一个根节点，但可以无限深。

 let tree = {

   label: 'root',

   nodes: [

     {

       label: 'item1',

       nodes: [

         {

           label: 'item1.1'

         },

         {

           label: 'item1.2',

           nodes: [

             {

               label: 'item1.2.1'

             }

           ]

         }

       ]

     }, 

     {

       label: 'item2'  

     }

   ]

 }

递归组件

让我们做一个递归组件来显示我们的称为 TreeMenu 的数据结构。它只显示当前节点的标签，并调用自己来显示任何子节点。文件名：TreeMenu.vue，内容如下：

 <template>

   <div class="tree-menu">

     <div>{
   { label }}</div>

     <tree-menu 

       v-for="node in nodes" 

       :nodes