递归组件

递归组件通过自身嵌套实现层级结构渲染。

基本用法

<!-- TreeNode.vue -->
<template>
  <li>
    <div>{{ node.label }}</div>
    <ul v-if="node.children">
      <TreeNode
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </ul>
  </li>
</template>

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

name 属性

递归组件必须有 name 属性：

export default {
  name: 'TreeNode'  // 必须
}

组件引用自身时通过 name 查找。

使用

<TreeNode :node="treeData" />

data() {
  return {
    treeData: {
      id: 1,
      label: '根节点',
      children: [
        { id: 2, label: '子节点1' },
        { id: 3, label: '子节点2' }
      ]
    }
  }
}

防止无限循环

<TreeNode
  v-for="child in node.children"
  :key="child.id"
  :node="child"
  :depth="depth + 1"
/>

可通过 depth 限制递归深度。

要点总结

• 递归组件必须有 name 属性
• 适用于树形结构（菜单、目录、分类）
• 注意终止条件，避免无限递归
• 可传递 depth 控制层级