vue.js 递归调用

Vue.js 递归调用通常使用组件的递归来实现。在组件中，你可以通过在组件模板中调用自身来实现递归。

例如，假设你有一个树形结构的数据，你想要用 Vue.js 来递归地渲染这个树形结构。你可以创建一个名为 `TreeItem` 的组件，并在组件的模板中调用自身来渲染子节点。下面是一个简单的示例：

<template>
  <div class="tree-item">
    <span>{{ item.label }}</span>
    <ul v-if="item.children">
      <tree-item v-for="child in item.children" :item="child" :key="child.id"></tree-item>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TreeItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  }
}
</script>

在上面的代码中，`TreeItem` 组件的模板中包含一个 `ul` 元素，用来渲染子节点。如果当前节点有子节点，那么就使用 `v-for` 指令来递归地渲染每个子节点。

在使用上述组件时，你可以将根节点传递给 `TreeItem` 组件的 `item` 属性，从而渲染整个树形结构。

<template>
  <div class="tree">
    <tree-item :item="treeData"></tree-item>
  </div>
</template>

<script>
import TreeItem from './TreeItem.vue'

export default {
  name: 'Tree',
  components: {
    TreeItem
  },
  data () {
    return {
      treeData: {
        label: 'Root',
        children: [
          {
            label: 'Child 1'
          },
          {
            label: 'Child 2',
            children: [
              {
                label: 'Grandchild 1'
              },
              {
                label: 'Grandchild 2'
              }
            ]
          }
        ]
      }
    }
  }
}
</script>

上面的代码中，我们使用 `TreeItem` 组件来递归地渲染树形结构。根节点的数据被传递给 `TreeItem` 组件的 `item` 属性，从而渲染整个树形结构。