Vue.js中怎么利用递归组件实现一个可折叠的树形菜单-创新互联

本篇文章给大家分享的是有关Vue.js中怎么利用递归组件实现一个可折叠的树形菜单，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

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

Vue.component('recursive-component', {
  template: `
       `
 });

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

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

数据结构

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

一个 label 属性。

如果它有子节点，一个 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，内容如下：

如果你使用一个组件递归，必须先给 Vue.component 做一个全局的定义，或者，给它一个 name 属性。否则，任何子组件将无法进一步调用它，你会得到一个不确定的“ undefined component error ”的错误提示。

基本事件

与任何递归函数一样，你需要一个基本事件来结束递归，否则渲染将无限期地继续下去，最终会导致堆栈溢出。

在树菜单中，当我们到达一个没有子节点的节点的时候，我们希望停止递归。你能通过 v-if 做到这一功能，但我们选择使用 v-for 将隐式地为我们实现它；如果 nodes 数组没有任何进一步的定义 tree-menu 组件将被调用。 template.vue 文件如下：

使用用法

我们现在如何使用这个组件？首先，我们声明一个 Vue 实例，具有一个数据结构包括 data 属性和定义过的 treemenu 组件。 app.js 文件如下：

import TreeMenu from './TreeMenu.vue'
 let tree = {
  ...
 }
 new Vue({
  el: '#app',
  data: {
   tree
  },
  components: {
   TreeMenu
  }
 })

请记住，我们的数据结构有一个根节点。我们在主模板开始递归调用 TreeMenu 组件，使用根 nodes 属性来props：