Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "how to use recursive components to build a tree menu in Vue.js", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use recursive components to build a tree menu in Vue.js" can help you solve your doubts.

In Vue.js, a recursive component calls itself, such as:

Vue.component ('recursive-component', {template: `})

Recursive components are often used to display comments, nested menus, or basically the same type of parent and child on the blog, although the details are different. For example:

Now I'll show you how to use recursive components effectively, and I'll take it one step at a time by creating an expandable / shrinking tree menu.

Data structure

A recursive component of a tree UI will be a visual representation of some recursive data structures. In this tutorial, we will use a tree structure, where each node is an object:

A label property.

If it has a child node, a nodes attribute, it is an array property of one or more nodes.

Like all tree structures, it must have a root node, but can be infinitely deep.

Let tree = {label: 'root', nodes: [{label:' item1', nodes: [{label: 'item1.1'}, {label:' item1.2', nodes: [{label: 'item1.2.1'}]}]}, {label:' item2'}]}

Recursive component

Let's do a recursive component to display our data structure called TreeMenu. It only displays the label of the current node and calls itself to display any child nodes. File name: TreeMenu.vue, the contents are as follows:

{{label}} export default {props: ['label',' nodes'], name: 'tree-menu'}

If you use a component recursion, you must first give Vue.component a global definition, or give it a name attribute. Otherwise, any subcomponents will not be able to call it further, and you will get an uncertain "undefined component error" error.

Basic event

Like any recursive function, you need a basic event to end the recursion, otherwise the rendering will continue indefinitely, eventually resulting in a stack overflow.

In the tree menu, when we reach a node that has no child nodes, we want to stop recursion. You can do this through v-if, but we choose to use v-for to implicitly implement it for us; if the nodes array does not have any further definition, the tree-menu component will be called. The template.vue file is as follows:

...

Usage

How do we use this component now? First, we declare an instance of Vue with a data structure that includes data properties and defined treemenu components. The app.js file is as follows:

Import TreeMenu from'. / TreeMenu.vue' let tree = {...} new Vue ({el:'# app', data: {tree}, components: {TreeMenu}})

Remember that our data structure has a root node. We call the TreeMenu component recursively at the beginning of the main template, using the root nodes attribute to props:

Here's what it looks like right now:

The correct posture

It is good to visually identify the "depth" of subcomponents so that users can get a sense of the data structure from UI. Let's indent the child nodes of each layer to achieve this goal.

This is achieved by adding a depth prop definition through TreeMenu. We will use this value to dynamically bind the inline style to the transformation: create an indentation by using the CSS rule of transform: translate for the label of each node. Template.vue is modified as follows * *: * *

{{label}} export default {props: ['label',' nodes', 'depth'], name:' tree-menu', computed: {indent () {return {transform: `translate (${this.depth * 50} px) `}}

The depth attribute starts from scratch in the main template. In the component template above, you can see that this value increments each time it is passed to any child node.

Note: remember the v-bind depth value to make sure it is a JavaScript numeric type rather than a string.

Unfold / put away

Because recursive data structures can be large, a good UI trick to display them is to hide all nodes except the root node so that the user can expand or collapse the node as needed.

To do this, we will add a local attribute, showChildren. If his value is False, the child node will not be rendered. This value should be switched by clicking on the node, so we need to use a single-click event listener method toggleChildren to manage it. The template.vue file is modified as follows * *: * *

{{label}} export default {props: ['label',' nodes', 'depth'], data () {return {showChildren: false}}, name:' indent: {return {transform: `translate (${this.depth * 50} px) `}}, methods: {toggleChildren () {this.showChildren =! this.showChildren Read here, this article "how to use recursive components to build a tree menu in Vue.js" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.