vue实现组件递归

Vue 组件递归实现方法

递归组件在 Vue 中常用于处理树形结构数据（如菜单、评论回复等）。以下是具体实现方式：

使用组件自身名称递归

在组件内部通过 name 选项引用自身实现递归：

<template>
  <div>
    <div>{{ node.title }}</div>
    <my-component 
      v-for="child in node.children" 
      :key="child.id" 
      :node="child"
    />
  </div>
</template>

<script>
export default {
  name: 'MyComponent', // 必须定义name
  props: {
    node: Object
  }
}
</script>

动态组件递归

通过 component 标签实现动态递归：

<template>
  <component 
    :is="componentName" 
    v-for="item in list" 
    :key="item.id" 
    :data="item"
  />
</template>

<script>
export default {
  props: ['data'],
  computed: {
    componentName() {
      return this.data.children ? 'RecursiveComponent' : null
    }
  }
}
</script>

注意事项

递归组件必须设置终止条件，避免无限循环。典型做法是判断数据是否存在子节点：

<template>
  <div>
    <span>{{ data.name }}</span>
    <recursive-component 
      v-if="data.children && data.children.length" 
      v-for="child in data.children" 
      :key="child.id" 
      :data="child"
    />
  </div>
</template>

性能优化建议

对于深层级递归，建议添加 v-once 指令缓存静态内容：

<recursive-component 
  v-once
  v-for="item in treeData" 
  :key="item.id" 
  :data="item"
/>

组件命名冲突解决

当使用单文件组件时，可通过 __vue__options__ 访问组件选项：

const selfComponent = {
  name: 'TreeItem',
  template: `
    <li>
      {{ model.name }}
      <ul v-if="model.children">
        <tree-item 
          v-for="child in model.children" 
          :key="child.id"
          :model="child"
        />
      </ul>
    </li>
  `,
  props: ['model']
}

以上方法可根据具体场景选择使用，注意递归深度控制以避免性能问题。