Simple usage example of vue recursive component

Preface

I believe many students are already familiar with recursion. We often use recursion to solve problems in algorithms. For example, the classic one is: from an array full of numbers, find the combination whose sum equals the target number. The idea is not difficult. Loop through the array to get values ​​and recursively add them until the target number conditions are met. Although recursion can solve most problems, its disadvantage is that it is easy to write code that results in an infinite loop and a stack overflow. Next, I will talk about the application of recursion in Vue components based on my actual business scenarios.

Use in Vue

To complete a complete recursion, I personally think there are two most important points:

1. Determine the conditions for entering recursion;
2. Determine the conditions for jumping out of the recursion;
   

The most important thing is to determine when to jump out of the recursion. The recursive component is actually very simple. It is just that component A calls component A again, which forms a recursion. Take the following business I encountered as an example. One day I received a requirement to filter out target users from a bunch of users based on different label conditions. Therefore, there is the following design diagram:

At first glance, you may be confused, but in fact, after careful analysis, you will find that it is not very difficult. Looking at the picture, many students will feel that it is a bit like what we often call nesting dolls, with one layer inside another. For this kind of graph, we first analyze which is the smallest unit. It is easy to see from the above figure that the smallest one is this one. The large structure in the figure is basically composed of this small piece. As long as this piece is implemented first, the rest is nothing more than rendering the data layer by layer through recursion.

The rest is nothing more than judging the data structure. If there is no subtree, simply render the item. If an item contains a subtree, you have to re-render the component and pass the child data into it. So the idea is actually very simple, assuming our data structure is like this:

{
 type: 'or',
 valueList: [
  {	
   condition: 'Number of logins in the last 7 days',
   login: '!=',
   value: 45
  },
  {	
   condition: 'Number of logins in the last 7 days',
   login: '!=',
   value: 45
  },
  {
   type: 'and'
   valueList: [
   	{
     condition: 'Number of logins in the last 7 days',
     login: '!=',
     value: 45
    }
   ]
  }
 ]
}

The data structure above is very clear. You can see that when the sub-item in the array contains valueList, it indicates that the small component mentioned in the above figure needs to be re-rendered. Therefore, we can simply code as follows (the following code can still be optimized):

<template>
 <div class="label-list">
  <el-tag type="primary" size="mini" class="logic">{{ typeDict[treedata.type] }}</el-tag>
  <template v-for="(item, index) in treedata.valueList">
   <ul v-if="!item.hasOwnProperty('valueList')" :key="'rule_' + index">
    <li>{{ item.condition }} {{ item.logic }} {{ item.value }}</li>
   </ul>
  </template>
  <template v-for="(item, index) in treedata.valueList">
   <!-- Here it is determined that there is a valuelist, so the rendering component is called again to render the sub-items-->
   <label-shows-view v-if="item.hasOwnProperty('valueList')" :key="'tree_' + index" :treedata="item"></label-shows-view>
  </template>
 </div>
</template>
<script>
const _TYPE = {
 'and': 'and',
 'or': 'or'
}
export default {
 name: 'LabelShowsView',
 props: {
  treedata: {
   type: Object,
   required: true
  }
 },
 data() {
  return {
   typeDict: _TYPE
  }
 }
}
</script>

It is not difficult to see that the main thing is to analyze and find the repeated parts in the data structure and render them layer by layer. In fact, the above example is relatively easy to understand for pure display purposes. If there is data interaction, extra attention needs to be paid. If the recursive level is very deep, event transmission and data changes need to be handled carefully. For example, when I completed the above visual configuration to filter customer groups, I encountered the following figure:

You can add and delete sub-items, and you can also drag each group to adjust its position. At this time, you can use a method similar to bubbling, where the child component triggers events and also receives events. For example, when deleting a set of conditions, you need to notify the parent component which item of child data to delete, as follows:

<!-- labelRulesView.vue -->
<!-- This custom component is the recursive component of this component-->
<label-rules-view v-if="item.hasOwnProperty('valueList')" :label-list="labelList" :treedata="item" :current-index="index" @delGroup="funDelGroup"></label-rules-view>
<!-- This component listens to the delGroup event -->
 
<el-button size="mini" type="danger" icon="el-icon-delete" class="operate-btn" @click="handleDelNewGroup(currentIndex)"></el-button>

// Delete a group handleDelNewGroup(index) {
 this.$emit('delGroup', index) // trigger events to upper-level components},
funDelGroup(index) {
 this.treedata.valueList.splice(index, 1)
},

In a recursive component, this component often plays the role of both a child component and a parent component. Therefore, it is necessary to control the interaction between data, otherwise it is easy to cause data confusion.

summary

This article is a record of what the author encountered in actual business scenarios. Using recursive components, we can even complete some more complex graphical displays. I hope this can help you broaden your thinking. If it helps you, please give me a little heart (I will definitely refuse next time [doge])

The above is the details of a simple usage example of the vue recursive component. For more information about the vue recursive component, please pay attention to other related articles on 123WORDPRESS.COM!