This is the 11th day of my participation in the August Wenwen Challenge.More challenges in August

For a long time, I’m a little afraid of recursion, the in the mind a bit flustered, total feel bad logic, did not dare to try, see article iview steps today a whim, and colleagues say there is a new feature article intends to use step, is below this, however, I personally feel like tree HHHH ~ ~ ~ let’s get together and see it ~ ~ ~

What is a recursive component

A recursive component, as the name implies, is its own internal implementation that calls its own component. For example, the Vue official treeView example, the parent directory has subdirectories, subdirectories and subdirectories, children and grandchildren, and so on. Like a Matryoshka doll.

Two conditions for recursive formation

In addition to the name option mentioned above, there is also a point to be taken care of when implementing recursive components, which is to prevent infinite recursion, resulting in call stack overflow. The above mentioned children and grandchildren, endless also, can say, but the browser can not stand. This involves analyzing the termination conditions of the recursion in terms of the actual scenario. Simplification is the following two sentences.

  • The component has a name attribute
  • Recursive calls need to be conditional
  • Components no longer need to declare themselves with the Components property. With the name property, components with the name value can be called directly from the template

The parent component

<div class="hello">
   <Tsteps :list="stepsdata"></Tsteps>
</div>
Copy the code

The simulated data is shown below

Child components

template> <Steps :current="list.length" direction="vertical"> <step v-for="item in list" icon="ios-camera" :key="item.key" :title="item.title" > <Tsteps :list="item.children"></Tsteps> </step> </Steps> </template> <script> Export default {name:'Tsteps', props: {list: {// All tree nodes type: Array, default: () => {return []}}}} </script>Copy the code

Summary, in fact, sometimes is the psychological effect, understand the principle, and then arrange ideas, step by step to write with ideas, and do not easily deny their own ao ~ ~ ~ step out of the first step, is a third of the success, the front road is very long, continue to work hard ～～～～