递归组件 代码实例 vue

当我们谈论递归组件时，我们通常是指在 Vue.js 中使用组件自身作为它的子组件，从而创建一个可以无限嵌套的组件结构。这在处理具有层级结构的数据（例如树形结构）时非常有用。

下面是一个简单的示例，演示如何创建一个递归组件：

<template>
  <div>
    <div>{{ node.name }}</div>
    <div v-if="node.children">
      <RecursiveComponent v-for="child in node.children" :key="child.id" :node="child" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'RecursiveComponent',
  props: {
    node: {
      type: Object,
      required: true
    }
  },
  components: {
    RecursiveComponent: () => import('./RecursiveComponent.vue') // 异步加载子组件，避免循环依赖
  }
}
</script>

这是一个简单的递归组件示例，它接受一个 `node` 对象作为 prop，并将其名称显示在页面上。如果该节点具有子节点，则递归地渲染子组件 `RecursiveComponent`。

需要注意的是，为了避免循环依赖，我们使用了异步加载子组件的方式。

你可以根据自己的需求修改递归组件的具体实现。希望这个示例能对你有所帮助！