vue 移动端树结构功能_【H5】Vue 递归组件构建一个树形菜单

Vue.js 中的递归组件是一个可以调用自己的组件例如：

递归组件一般用于博客上显示评论，树形菜单或者嵌套菜单。

一、初始化

我们直接使用 vue 提供的脚手架 vue-cli 来初始化我们的工程：

# 搭建项目

vue init webpack-simple tree-menu

# 进入项目

cd tree-menu

# 依赖安装

npm install

# 运行项目

npm run dev

现在我们的环境已经准备好了，在初始化的项目中，有一些不需要的代码我们可以自己动手删除。

二、数据结构

在本教程中，我们将使用一个树结构的数据来作为我们的每个菜单项，其中每个节点都是一个对象：

label 属性，作为菜单的列表，如果该菜单下还有子菜单，就需要一个 nodes 属性，这是一个或多个节点的数组。

这里需要注意的是像所有的树结构一样，必须有一个根节点，然后从这个根节点进行无限嵌套。

三、递归组件

将 src 下的 app.vue 修改为 TreeMenu.vue ，该组件将作为我们的树形的递归组件，用来显示当前节点和自己的子节点。

如果您正在使用递归组件，则必须使用全局注册 Vue.component，或者给它一个 name 属性。否则，组件的任何子节点将无法解析进一步的调用，