recursividad del componente vue: implementación del menú en cascada

Los proyectos recientes suelen utilizar algunas bibliotecas de interfaz de usuario, como element, iview, etc. Estas bibliotecas son realmente convenientes para crear aplicaciones rápidamente. Por ejemplo, el menú en cascada de iview es muy fácil de usar, pero mientras lo uso, no puedo evitar empezar a tener algunas dudas, es decir, cómo lograr un enlace multinivel, hasta donde yo sé, si un dato es. multicapa, v-for debe usarse varias veces y necesita saber cuántas veces repetirse, pero este componente no parece necesitar reutilizarse varias veces. Bien, ¡pongámonos manos a la obra!

Primero, tenemos estos datos JSON:

Esta es la parte más importante, es decir, la recursividad del componente, que puede implementar menús en cascada de varios niveles, que es la Lo mismo que los objetos de copia profunda. Entonces, escribamos un componente recursivo basado en estos datos:

Lo que debemos enfatizar aquí es que el atributo de nombre del componente debe existir; de lo contrario, no podrá implementar la recursividad. También requiere una condición de terminación. Es el isFloder anterior.

Una cosa más a tener en cuenta aquí: el bucle v-for debe estar vinculado a una clave; de ​​lo contrario, se emitirá una advertencia.

Finalmente, así es como se ve este sencillo menú en cascada: