用 Vue.js 递归组件实现可折叠的树形菜单(demo)

递归组件是Vue.js中的一项强大功能，用于构建复杂的嵌套结构，如树形菜单。下面我将通过一个具体的例子，展示如何使用Vue.js递归组件创建一个可扩展和可收缩的树形菜单。

我们需要了解数据结构。在这个例子中，我们将使用一个树形结构作为数据结构，每个节点都有一个标签和一组子节点（如果存在）。这种数据结构可以无限地嵌套。接下来，我们来创建一个名为TreeMenu的递归组件。组件内部使用v-for指令遍历节点数组，并为每个节点创建一个新的TreeMenu组件实例。通过这种方式，组件可以递归地调用自身来渲染整个树形结构。让我们开始编码吧！

数据结构示例：

```javascript

let tree = {

label: '根节点',

nodes: [

{

label: '节点1',

nodes: [

{ label: '子节点1.1' },

{ label: '子节点1.2', nodes: [{ label: '子节点1.2的子节点' }] } // 嵌套的子节点

]

},

{ label: '节点2' } // 可以有多个节点

]

};

```

接下来是TreeMenu组件的代码：

TreeMenu组件代码：

```vue

``` `