Today, we continue to use Vue's "roll up our actual combat project". Only in the actual combat can we understand more. Just talk about the war and get the eggs. Continue our Summary of binding dynamic components and global events triggered by a case of Vue After that, let's talk about how we use recursive components in our projects.

Classified display list of information

This time, we mainly implement a classification display list of information with two or three levels of classification, as shown below:

Seeing this, many people will think that this implementation is very simple. A nested loop will not be finished.

Yes, you're right. It's that simple. Let's see how such a simple list is implemented first, and then what's the disadvantage of this scheme.

Let's first look at our data format

list: [{
    name: "Economics",
    children: [{
        name: "Like home"
    }, {
        name: "7 day"     
    }]
}, {
    name: "Comfortable",
    children: [{
        name: "Smart holiday"
    }, {
        name: "Whole season"     
    }]
}]

Based on the above data format, our implementation method is as follows:

<div class="list-item" v-for="(item, index) in list" :key="index">
  <div class="item-name">
    <span>{{item.name}}</span>
  </div>
  <div v-if="item.children" class="children-item">
    <div v-for="(child, index) in item.children" :key="index">
      <div class="item-name">
        <span>{{child.name}}</span>
      </div>
    </div>
  </div>
</div>

Well, it looks perfect. Our list is also very well displayed. It's a success.

But suddenly one day our products suddenly ran by and said, our data has now added a level of classification, and now it's like this.

list: [{
    name: "Economics",
    children: [{
        name: "Like home",
        children: [{
            name: "Changjiang Road-Like home"
        }, {
            name: "Wangjiang Road-Like home"     
        }]
    }, {
        name: "7 day",
        children: [{
            name: "Changjiang Road-7 day"
        }, {
            name: "Wangjiang Road-7 day"     
        }]
    }]
}]

Well, since the product needs data to change, let's change the code, so we continue to add a layer of nested loop to the original code, and this time it's finally finished, but maybe within two days our data has added another level of classification. What should we do? Or continue nesting?

Some students may think that there is no such a multi-level data display that will not exist. That can only say that we are too young, and we do not rule out the possibility of this existence. What should we do if we encounter this situation? Here we will use the recursion component. No matter how much data you add, we don't need to change our code.

Recursive component

What is a recursive component? To put it simply, use the component itself in the component. Let's see how to use recursive components in the project to solve the above problems.

First, let's create a recursive component of List

<template>
    <div>
        <div class="list-item" v-for="(item, index) in list" :key="index">
            <div class="item-name">
                <span>{{item.name}}</span>
            </div>
            <div v-if="item.children" class="children-item">
                <list :list="item.children"></list>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  name: "List",
  props: {
    list: Array
  }
};
</script>

Note that in the above code, we use the List component itself. After that, when we use the List component in the external parent component, no matter how many layers of nesting relationship our data has, it can be perfectly adaptive loaded, and we no longer need to nest it.

<template>
    <div class="list-detail">
      <list :list="list"></list>
    </div>
</template>
<script>
import List from "./components/List";
export default {
  name: "Parent",
  components: { List },
  data() {
    return {
      list: [{
          name: "Economics",
          children: [{
              name: "Like home",
              children: [{
                  name: "Upper river road-Like home"
                },
                {
                  name: "Wangjiang Road-Like home"
                }]
            },{
              name: "7 day",
              children: [{
                  name: "Changjiang Road-7 day"
                },
                {
                  name: "Wangjiang Road-7 day"
                }]
            }]
        }]
    }
  }
}
</script>

Finally, let's look at the rendered results

summary

As mentioned above is the recursive component we are going to talk about today. Let's try it quickly.

Similar to the display of information classification is a very common form in our project. We can use recursive components to solve problems

If there are any shortcomings in the article, welcome to leave a message and clap bricks!