In this article

Like + attention + favorites = learned


In everyday Vue projects, there is a high probability that component libraries will be used to assist development, so the visibility of recursive components may not be very high. But that doesn’t mean recursive components aren’t important.

This article will take you about 10 minutes to learn the use of recursive components.

Before doing so, you must know the basics of HTML + CSS + JS + Vue3 and at least know what Vue components are.





Usage on

Before we look at recursive components, we need to understand a few concepts.


What is recursion?

Recursion in Baidu Baike is defined as:

The programming technique by which a program calls itself is called recursion

You can think of recursion roughly as a loop, except that recursion calls itself.

In practice, it is necessary to set a boundary condition for recursion and use this boundary condition to determine whether to continue recursion.

If you do not set a judgment condition, it will result in infinite recursion, that is, an infinite loop!


What is a recursive component?

Seeing this, I’m sure you know what a Vue component is.

I’ll leave the Vue3 Recursive Component documentation here.

A recursive component is a combination of “recursion” and “component”.

The component keeps calling itself within the boundary condition until the boundary condition is exceeded.


Where are recursive components used?

Examples of recursion components in my work are:

  • Tree component: Used to show file hierarchy.
  • Left navigation bar: The navigation menu is generated based on the routing hierarchy.
  • Multilevel tables (nested tables).



To fit in field

After the previous explanation, I believe you have a certain concept of recursive components.

Let’s go through a simple example.

The figure above is an example of this.

I didn’t write a style, but you’re going to have to do it, and imagine that this is the left navigation bar of your website.

This navigation bar, there are dead in the front; Some write services require back-end configuration, and the front end requests the navigation data back to regenerate the route.

So you can understand that the front end doesn’t know how many levels of navigation there are at the beginning.

This can be done in the form of recursive components.


The steps are as follows:

  1. Creating navigation Components
  2. Globally register the navigation component
  3. Get data (this example is for learning purposes, so write dead data in the front end)
  4. Set recursive boundaries in the navigation component and render the data


1. Create a component

I named the navigation component RootNav.vue. And put it in the Components directory.

RootNav.vue

<template>
  <div>
    Rootnav
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style>
Copy the code

The project directory is as follows:

Omit part of the directory and file - SRC | - main. Js | - App. Vue | - components | - RootNav. VueCopy the code


2. Global registry components

I registered the RootNav.vue component globally so that rootNav. vue could call itself.

main.js

import { createApp } from 'vue'
import App from './App.vue'
import RootNav from './components/RootNav.vue' // Introduce the RootNav component

const app = createApp(App)

app.component('RootNav', RootNav) // Register RootNav as a global component

app.mount('#app')
Copy the code


Use in app.vue

App.vue

<template>
  <div>
    <RootNav />
  </div>
</template>
Copy the code

The browser interface is shown in the figure above.


3. Obtain navigation data

In a real project, the left navigation might be retrieved from the back end.

But the purpose of this article is to learn about recursive components, so a “requested data” is simulated directly on the front end.

I put the “Request data” action in app.vue. This is then passed to the rootNav. vue component as props.

Speaking of props, I would like to mention: “Vue3 over 10 Component Communication Methods”.


App.vue

<template>
  <div>
    <RootNav :list="navList" />
  </div>
</template>

<script setup>
const navList = [
  {
    name: 'First level navigation 1'
  },
  {
    name: 'Primary navigation 2'.children: [{name: 'Secondary navigation 2-1' },
      {
        name: 'Secondary navigation 2-2'.children: [{name: 'Navigation Level 3 2-2-1' },
          { name: 'Tertiary navigation 2-2-2']}, {},name: 'Secondary navigation 2-2'}]}, {name: 'Level 1 navigation 3'}]</script>
Copy the code


RootNav.vue

<template>
  <div>
    RootNav    
  </div>
</template>

<script setup>
const props = defineProps({
  list: {
    type: Array.default: () = >[]}})</script>
Copy the code

The “requested navigation data” is now received in RootNav.vue.


4. Set recursive boundaries and render data

We see that the navigation data has the children field, which stands for “submenu.”

We can tell if we need to continue recursion by the presence or absence of the children field. In other words, children are recursive boundary conditions.

RootNav.vue

<template>
  <ul>
    <template v-for="item in list">
      <li>{{ item.name }}</li>
      <RootNav v-if="'children' in item" :list="item.children" />
    </template>
  </ul>
</template>

<script setup>
const props = defineProps({
  list: {
    type: Array.default: () = >[]}})</script>
Copy the code

The focus of this section is in the HTML code.

So here we are, completing our original goal.





The complete code

main.js

import { createApp } from 'vue'
import App from './App.vue'
import RootNav from './components/RootNav.vue'

const app = createApp(App)

app.component('RootNav', RootNav)

app.mount('#app')
Copy the code


App.vue

<template>
  <div>
    <RootNav :list="navList" />
  </div>
</template>

<script setup>
const navList = [
  {
    name: 'First level navigation 1'
  },
  {
    name: 'Primary navigation 2'.children: [{name: 'Secondary navigation 2-1' },
      {
        name: 'Secondary navigation 2-2'.children: [{name: 'Navigation Level 3 2-2-1' },
          { name: 'Tertiary navigation 2-2-2']}, {},name: 'Secondary navigation 2-2'}]}, {name: 'Level 1 navigation 3'}]</script>
Copy the code


components/RootNav.vue

<template>
  <ul>
    <template v-for="item in list">
      <li>{{ item.name }}</li>
      <RootNav v-if="'children' in item" :list="item.children" />
    </template>
  </ul>
</template>

<script setup>
const props = defineProps({
  list: {
    type: Array.default: () = >[]}})</script>
Copy the code





Recommended reading

👍 “What does vue Create actually do?”

👍 “Vue3 over 10 Component Communication Modes”

👍 Vite Vue2 Project (Vue2 + VUE-Router + VUex)

👍 Console. log can also be illustrated


If this article has been helpful to you, I hope you can click the “like” button