Vue.js Cómo construir componentes recursivos en un menú de árbol
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"