vue html 递归

在 Vue 中，你可以使用递归组件来实现 HTML 的递归。递归组件是指在组件的模板中使用该组件本身。这可以用于渲染具有任意深度的嵌套数据结构，例如树形结构。

下面是一个简单的例子，展示如何使用递归组件来渲染树形结构：

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
      <my-tree :items="item.children" v-if="item.children" />
    </li>
  </ul>
</template>

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

在上面的例子中，我们定义了一个名为 `MyTree` 的递归组件，它接收一个名为 `items` 的数组 prop。在组件的模板中，我们使用 `v-for` 来遍历 `items` 数组并渲染每个节点。如果当前节点有子节点，则递归地渲染子节点，这通过使用 `<my-tree>` 组件并传递子节点的数组作为 `items` prop 来实现。注意，我们还使用了 `v-if` 来确保只有当节点有子节点时才渲染递归组件，以避免无限递归。

当然，这只是一个简单的例子，你可以根据自己的需求来更改模板和组件的实现。