Recursive components are a very powerful concept in Vue, which can greatly simplify code especially when rendering hierarchies (such as tree structures, nested lists, comment systems, etc.).
What is a recursive component?
A recursive component is a component that references itself in its template. This approach is often used to render tree structures or nested hierarchies. For example, you may encounter a requirement: you have a data structure that contains parent nodes and children, each node may have its own child nodes, and so on. Using recursive components, this nested structure can be easily rendered.
Why use recursive components?
When you need to render complex nested data, such as tree directories, comments, organizational charts, etc., recursive components can help you encapsulate rendering logic in one component, making the code more concise and easy to maintain.
How recursive components work
The core idea of recursive components is: components render themselves through themselves. Each time a component is rendered, it passes the current child to itself as a prop of the new component until all the children are rendered.
The basic structure of recursive components
A simple recursive component is usually composed of the following parts:
Parent component: The structure that passes data and child components.
Subcomponents: Iterate through v-for in its template and render itself.
Recursive component example: tree structure
Let's understand recursive components with a practical example. In this example, we will create a tree-shaped directory (such as a folder) to display:
Data structure
Suppose we have the following data structure, which represents a folder tree:
const folders = [
{
id: 1,
name: 'Folder 1',
children: [
{ id: 2, name: 'File 1.1', children: [] },
{ id: 3, name: 'File 1.2', children: [] }
]
},
{
id: 4,
name: 'Folder 2',
children: [
{
id: 5,
name: 'Folder 2.1',
children: [
{ id: 6, name: 'File 2.1.1', children: [] }
]
}
]
}
];
Recursive component code:
We will create a recursive component Folder to display each folder and its subfolders.
(Recursive component)
<template>
<div>
<!-- Show the name of the current folder -->
<div>{{ }}</div>
<!-- If the folder has a subfolder or file，Recursive rendering subfolders -->
<div v-if=" && ">
<folder v-for="child in " :key="" :folder="child" />
</div>
</div>
</template>
<script>
export default {
name: 'Folder', // Name of the recursive component props: {
folder: Object // Receive a folder object as a prop }
};
</script>
<style scoped>
div {
padding-left: 20px; /* When nested, subfolders have indentation */
border-left: 1px solid #ccc;
margin: 5px 0;
}
</style>
(Parent component)
In the parent component, we will pass the folders data and show the recursive component.
<template>
<div>
<h1>Folder Tree</h1>
<folder v-for="folder in folders" :key="" :folder="folder" />
</div>
</template>
<script>
import Folder from './'; // Introduce recursive components
export default {
name: 'App',
components: {
Folder
},
data() {
return {
// Tree structure data folders: [
{
id: 1,
name: 'Folder 1',
children: [
{ id: 2, name: 'File 1.1', children: [] },
{ id: 3, name: 'File 1.2', children: [] }
]
},
{
id: 4,
name: 'Folder 2',
children: [
{
id: 5,
name: 'Folder 2.1',
children: [
{ id: 6, name: 'File 2.1.1', children: [] }
]
}
]
}
]
};
}
};
</script>
Folder Component:
folder is a prop that represents the information of the current folder. It contains a name (the name of the folder) and children (subfolder or file) properties.
In the template, we first display the name of the folder ({{ }}).
Then, use v-for to traverse, recursively render a new folder component if a subfolder or file exists. This is the key to recursion.
App Components:
folders data contains multiple folders, each of which may have subfolders or files. By passing this data to the Folder component, we finally render the nested folder structure.
The rendered HTML structure is similar to:
Folder Tree
- Folder 1
- File 1.1
- File 1.2
- Folder 2
- Folder 2.1
- File 2.1.1
//Each folder will render itself recursively until there are no more subfolders.Advantages of recursive components
Concise: Recursive components can extract complex nested structures into simple code, making the rendering logic clearer.
Flexible: For dynamic data structures (such as comments, folder trees, classifications, etc.), recursive components can handle data at different levels very conveniently.
Easy to maintain: Recursive components make the logic of hierarchical rendering centralized in one place, making the code easier to modify and maintain.
Things to note
Performance issues: Although recursive components are very convenient, recursive calls may cause performance problems if the data structure is very deep. Optimization needs to be considered at this time, such as limiting recursive hierarchy or lazy loading.
Termination Conditions: Recursive components need to ensure that there is a termination condition (for example, stop recursion when there are no more child nodes).
This is the end of this article about the implementation example of recursive components in vue. For more related contents of recursive components, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!