Vue.js是一款流行的前端框架，支持以数据驱动的方式构建用户界面。在Vue.js中，树形结构是一个常见的UI组件，被广泛应用于各种Web应用中。本文将介绍如何使用Vue.js来显示树形结构。

要显示树形结构，我们需要首先定义数据结构。在Vue.js中，可以使用对象或数组来表示树形结构。每个节点可以有一个属性来表示其子节点。例如，下面是一个包含3个节点的树形结构的示例：

{
    label: '节点1',
    children: [
        { label: '节点1.1', children: [] },
        { label: '节点1.2', children: [
            { label: '节点1.2.1', children: [] }
        ] },
    ]
}

接下来，我们可以使用v-for指令在模板中遍历每个节点，并递归地显示其子节点。在这个过程中，我们可以使用v-if指令来判断节点是否有子节点。如果有，就可以嵌套一个新的<tree>组件来显示其子节点。最终，我们可以得到如下的Vue组件：

<template>
  <ul class="tree">
    <li v-for="node in nodes">
      {{ node.label }}
      <tree v-if="node.children" :nodes="node.children"></tree>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'tree',
  props: {
    nodes: { type: Array, required: true }
  }
}
</script>

最后，我们可以使用<tree>组件来显示任意大小的树形结构。只需要传入根节点的数据即可。例如，下面是一个显示我们之前定义的示例树的Vue组件的代码：

<template>
  <tree :nodes="treeData"></tree>
</template>

<script>
export default {
  data () {
    return {
      treeData: {
        label: '节点1',
        children: [
          { label: '节点1.1', children: [] },
          { label: '节点1.2', children: [
            { label: '节点1.2.1', children: [] }
          ] },
        ]
      }
    }
  }
}
</script>