vue实现自关联

Vue 实现自关联组件

自关联组件通常指组件内部递归调用自身，适用于树形结构、评论嵌套等场景。以下是实现方法：

递归组件实现

在组件内部通过 name 选项注册自身，模板中可直接使用组件名递归：

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

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

动态组件实现

通过 :is 动态绑定组件，适合需要条件递归的场景：

<template>
  <component :is="componentType" :data="data"/>
</template>

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

注意事项

1. 必须设置终止条件防止无限递归，例如通过 v-if 判断子节点是否存在
2. 递归层级过深可能导致性能问题，建议设置最大深度限制
3. 在 Vue 3 中，<script setup> 语法糖需通过 defineOptions 定义 name：

<script setup>
defineOptions({ name: 'RecursiveComponent' })
</script>

完整示例（树形菜单）

// TreeMenu.vue
<template>
  <ul>
    <li v-for="item in data" :key="item.id">
      {{ item.name }}
      <TreeMenu v-if="item.children" :data="item.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeMenu',
  props: {
    data: Array
  }
}
</script>

使用时传入嵌套结构数据：

<template>
  <TreeMenu :data="treeData"/>
</template>

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

export default {
  components: { TreeMenu },
  data() {
    return {
      treeData: [
        {
          id: 1,
          name: 'Parent',
          children: [
            { id: 2, name: 'Child' }
          ]
        }
      ]
    }
  }
}
</script>