Recursive components in Vue - Step-by-Step Execution

Concept Flow - Recursive components

Component calls itself

↓

Pass props for child

↓

Render child component

↓

Child calls itself again?

↓

Repeat steps

↓

Done

A component renders itself recursively by calling itself with new data until a base case stops recursion.

Execution Sample

Vue

<script setup>
const props = defineProps({
  node: Object
})
defineOptions({
  name: 'RecursiveComponent'
})
</script>
<template>
  <div>
    {{ node.name }}
    <div v-if="node.children">
      <RecursiveComponent
        v-for="child in node.children"
        :key="child.name"
        :node="child"
      />
    </div>
  </div>
</template>

This Vue component renders a tree node and recursively renders its children if any.

Execution Table

Step	Component Instance	Props.node.name	Condition (node.children?)	Action	Rendered Output
1	Root	Root	Yes	Render Root, call RecursiveComponent for each child	<div>Root<div>Child 1...</div><div>Child 2...</div></div>
2	Child 1	Child 1	Yes	Render Child 1, call RecursiveComponent for its child	<div>Child 1<div>Grandchild 1...</div></div>
3	Grandchild 1	Grandchild 1	No	Render Grandchild 1, no children, stop recursion	<div>Grandchild 1</div>
4	Child 2	Child 2	No	Render Child 2, no children, stop recursion	<div>Child 2</div>
5	End	-	-	All nodes rendered, recursion ends	Full nested tree rendered

💡 Recursion stops when a node has no children (base case).

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
props.node.name	Root	Root	Child 1	Grandchild 1	Child 2	-
props.node.children	[Child 1, Child 2]	[Child 1's child]	null	null	null	-
Rendered Output		<div>Root...</div>	<div>Child 1...</div>	<div>Grandchild 1</div>	<div>Child 2</div>	Full nested tree

Key Moments - 3 Insights

Why does the component call itself multiple times?

Because each node with children triggers a new RecursiveComponent instance for each child, as shown in steps 1 and 2 in the execution_table.

What stops the recursion from going forever?

When a node has no children (node.children is null or undefined), the component does not call itself again, stopping recursion as seen in steps 3 and 4.

How does Vue know to render nested children correctly?

Each recursive call receives a different props.node, so Vue renders each level separately, nesting the output inside the parent div, shown in the Rendered Output column.

Visual Quiz - 3 Questions

Look at the execution_table at step 3. What is the value of props.node.children?

A Array with children

B null

C Undefined

D Empty string

💡 Hint

Check the 'Condition (node.children?)' column at step 3 in the execution_table.

At which step does the recursion stop for a node with no children?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look for the first step where 'Condition (node.children?)' is 'No' in the execution_table.

If the root node had no children, how would the execution_table change?

A There would be more steps for children

B Steps 1 to 5 remain the same

C Only step 1 would appear with condition 'No' and recursion stops immediately

D The recursion would never stop

💡 Hint

Refer to the exit_note and the condition column in the execution_table.

Concept Snapshot

Recursive components in Vue:
- A component calls itself inside its template.
- Pass props to child instances for recursion.
- Base case: stop when no children.
- Builds nested UI like a tree.
- Useful for hierarchical data rendering.

Full Transcript

Recursive components in Vue work by a component calling itself inside its template to render nested data structures like trees. Each recursive call receives a different piece of data via props. The recursion continues until a base case is met, typically when the current node has no children. This stops further recursive calls. The execution table shows each step where the component instance renders a node and calls itself for children if present. Variable tracking shows how props.node changes at each step. Key moments clarify why recursion stops and how Vue renders nested children. The visual quiz tests understanding of recursion stopping conditions and data flow. This method helps render complex nested UI with simple reusable components.