Red de conocimiento informático - Problemas con los teléfonos móviles - Vue.js Cómo construir componentes recursivos en un menú de árbol

Vue.js Cómo construir componentes recursivos en un menú de árbol

Lo que les traemos esta vez es cómo Vue.js construye componentes recursivos en menús de árbol. ¿Cuáles son las precauciones para construir componentes recursivos en menús de árbol en Vue.js? Los siguientes son casos reales, echemos un vistazo.

En Vue.js, los componentes recursivos se llaman a sí mismos, por ejemplo:

Vue.component('recursive-component', {

plantilla: `lt ; ! --¡Llámame! --gt;

lt; recursive-componentgt; lt; /recursive-componentgt;

}); Normalmente se utiliza para mostrar comentarios en un blog, menús anidados o básicamente el mismo tipo de componente padre-hijo, aunque los detalles varían.

Ahora, para mostrarte cómo usar componentes recursivos de manera efectiva, voy a construir paso a paso un menú de árbol expandible/contraíble.

Estructuras de datos

El componente recursivo de la interfaz de usuario del árbol será una representación visual de alguna estructura de datos recursiva. En este tutorial usaremos una estructura de árbol donde cada nodo es un objeto:

Un atributo de etiqueta.

Si tiene nodos secundarios, tiene una propiedad de nodo, que es una propiedad de matriz de uno o más nodos.

Como todas las estructuras de árbol, debe tener un nodo raíz, pero puede tener una profundidad infinita.

let tree = {

etiqueta: 'raíz',

nodos: [

{

etiqueta : 'elemento1',

nodos: [

{

etiqueta: 'elemento1.1'

},

{

etiqueta: 'item1.2',

nodos: [

{

etiqueta: 'item1.2.1 '

}

]

}

]

},

{

etiqueta: 'artículo2.1'

},

{

etiqueta: 'artículo2'

}

]

}

Componente recursivo

Hagamos un componente recursivo para mostrar una estructura de datos llamada TreeMenu. Solo muestra la etiqueta del nodo actual y se llama a sí mismo para mostrar los nodos secundarios. El nombre del archivo es: TreeMenu.vue y el contenido es el siguiente:

lt; template gt

lt; >

lt ;pgt;{{ label }}lt;/pgt;

lt;tree-menu

v-for="nodo en nodos"

:nodos ="nodo.nodos"

:label="nodo.label"