<template> <div class="tree-menu"> ... <!--If `nodes` is undefined this will not render--> <tree-menu v-for="node in nodes"></tree-menu> </template>
使用用法
我们现在如何使用这个组件？首先，我们声明一个 Vue 实例，具有一个数据结构包括 data 属性和定义过的 treemenu 组件。 app.js 文件如下：
import TreeMenu from './TreeMenu.vue'
let tree = {
...
}
new Vue({
el: '#app',
data: {
tree
},
components: {
TreeMenu
}
})
请记住，我们的数据结构有一个根节点。我们在主模板开始递归调用 TreeMenu 组件，使用根 nodes 属性来props：
<div id="app"> <tree-menu :label="tree.label" :nodes="tree.nodes"></tree-menu> </div>
下面是它目前的样子：
正确的姿势
在视觉上识别子组件的“深度”是很好的，这样用户就可以从UI中获得数据结构的感觉。让我们缩进每一层的子节点来实现这个目标。
这是通过增加一个 depth prop定义，通过 TreeMenu 来实现。我们将使用这个值动态地将内联样式与转换绑定在一起：将使用 transform: translate 的CSS规则为每个节点的标签，从而创建缩进。 template.vue 修改如下**：**
<template>
<div class="tree-menu">
<div :style="indent">{{ label }}</div>
<tree-menu
v-for="node in nodes"
:nodes="node.nodes"
:label="node.label"
:depth="depth + 1"
>
</tree-menu>
</div>
</template>
<script>
export default {
props: [ 'label', 'nodes', 'depth' ],
name: 'tree-menu',
computed: {
indent() {
return { transform: `translate(${this.depth * 50}px)` }
}
}
}
</script>
depth属性在主模板中从零开始。在上面的组件模板中，你可以看到每次传递到任何子节点时这个值都会递增。
<div id="app"> <tree-menu :label="tree.label" :nodes="tree.nodes" :depth="0" ></tree-menu> </div>
注意：记得 v-bind depth值以确保它是一个JavaScript数字类型而不是字符串。
展开/收起
由于递归数据结构可能很大，所以显示它们的一个很好的UI技巧是隐藏除根节点以外的所有节点，以便用户可以根据需要展开或收起节点。