vue 对象内容组合成树结构

Vue 可以通过使用递归组件的方式将对象内容组合成树结构。

首先，我们需要定义一个递归组件，用来展示每个节点的内容。这个组件包含了一个对自身的递归调用，以展示该节点下的子节点。同时，组件需要接收一个属性，来表示当前节点的内容。

然后，在父组件中，可以通过使用 v-for 指令循环遍历对象数组，并将每个对象传递给递归组件进行展示。当子节点存在时，递归组件会自动调用自身，从而实现了树形结构的展示。

具体实现的步骤如下：

1. 定义递归组件：

Vue.component('tree-node', {
  template: `
    <div>
      {{ node.label }}
      <tree-node v-for="child in node.children" :node="child" :key="child.id"></tree-node>
    </div>
  `,
  props: ['node']
})

2. 在父组件中使用递归组件展示树形结构：

new Vue({
  el: '#app',
  data: {
    treeData: [
      {
        id: 1,
        label: 'Node 1',
        children: [
          {
            id: 2,
            label: 'Node 1.1',
            children: []
          },
          {
            id: 3,
            label: 'Node 1.2',
            children: [
              {
                id: 4,
                label: 'Node 1.2.1',
                children: []
              }
            ]
          }
        ]
      }
    ]
  }
})

3. 在 HTML 中使用父组件：

<div id="app">
  <tree-node :node="treeData[0]"></tree-node>
</div>

最终，这样就可以将对象内容组合成树结构并展示出来。