For some regular DOM structures, if we write the same code over and over again, obviously the code is more tedious and unscientific, and their workload will greatly increase,

So is there a way to solve this problem?

The answer is yes, we can generate this structure recursively, and of course we can do this in Vue templates, we can call ourselves in Vue components, and this will do the job.

Of course, in Vue, components can call themselves recursively, but with some conditions:

  • The component must have a name attribute
  • Ensure that recursive calls have termination conditions to prevent memory overflow

To make it easier to understand recursive components, I wrote a small Demo:

Here is the data that we want to make a file tree:

TreeData: {title: "Web full Stack architect ", children: [{title: "Java architect "}, {title: "javascript advanced ", children: [{title:" javascript advanced ", children: [{title: "ES6"}, {title: "action"}]}, {title: "Web full stack ", children: [{title: "Vue camp ", expand: true, children: [{title: "action ", expand: true, children: [{title: "Modular"}, {title: "source"}, {title: "docker deployment"}}, {title: "React", the children: [{title: "JSX"}, {title: "Virtual DOM"}]}, {title: "Node"}]}Copy the code

Start with a tree component (Item) :

<template> <li> <! <div @click="toggle"> <! {{model.title}} <! Unfolding the icon is displayed, and if no directory at a lower level, do not show - > < span v - if = "isFolder" > [{{open? '-', '+'}}] < / span > < / div > <! - control whether show lower directory - - > < ul v - show = "open" v - if = "isFolder" > <! -- Key code, call itself, implement recursion, --> <Item v-for="model in model.children" :model="model" :key="model. Title "></Item> </ul> </li> </template> <script> export default {name: "Item", // If you want to use this component, the data to pass is: {model: {type: Object, required: True}}, data() {return {// default does not show subdirectories open: false}; }, computed: {/ / control if there is a directory, and display the lower at a lower level directory isFolder () {return this. Model. The children & & enclosing model. The children. The length; Toggle () {if (this.isfolder) {this.open =! this.open; }}}}; </script>Copy the code

The functionality of the specific code is commented above

Once again, this component must have the name attribute. Without the name attribute, the control cannot call itself, and it is best to bind a key value to the call, because the key value is a unique identifier

Also note that when recursing components, a condition is required to terminate the recursion, using the V-for invisible condition to terminate the recursion

Then import this component in the external component and bind the data usage as follows:

<template> <div> <ul> <! Using this component, <Item :model="treeData"></Item> </ul> </div> </template> <script> // import recursive component import Item from "./views/Item"; Export default {name: "App", data() {return {treeData: {... }}; }, components: {// register component Item}}; </script>Copy the code

The above code already implements a recursive tree structure, which looks like this:

The ones with the + sign can be expanded, and the ones with the – sign can be folded

While this blog post seems simple and small, Vue’s recursive component is a very powerful feature. It can be used to achieve some components such as file tree, department tree, cascade selection, in the actual business development of these components are often used, or very important ~

^ _ <