Comment créer un composant récursif dans un menu arborescent dans Vue.js

Cette fois, je vais vous montrer comment créer un composant récursif dans un menu arborescent avec Vue.js Quelles sont les précautions pour créer un composant récursif dans un menu arborescent avec Vue.js. ? Voici les cas suivants. Jetons un coup d’œil à des cas pratiques.

Dans Vue.js, un composant récursif s'appelle, tel que :

Vue.component('recursive-component', {
 template: `<!--Invoking myself!-->
    <recursive-component></recursive-component>
 });

Les composants récursifs sont souvent utilisés pour afficher des commentaires sur des blogs, des menus imbriqués ou fondamentalement du même type que celui du parent et de l'enfant, mais avec un contenu différent.

Maintenant, pour vous montrer comment utiliser efficacement les composants récursifs, je vais procéder étape par étape en créant un menu arborescent extensible/réduit.

Structure des données

Un composant récursif d’une interface utilisateur arborescente serait une représentation visuelle d’une structure de données récursive. Dans ce tutoriel nous utiliserons une arborescence où chaque nœud est un objet :

Un attribut label .

S'il y a des nœuds enfants, une propriété de nœuds est une propriété de tableau d'un ou plusieurs nœuds.

Comme toutes les structures arborescentes, elle doit avoir un nœud racine, mais peut être infiniment profonde.

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

Composants récursifs

Créons un composant récursif pour afficher notre structure de données appelé TreeMenu. Il affiche uniquement l'étiquette du nœud actuel et s'appelle pour afficher tous les nœuds enfants. Nom du fichier : TreeMenu.vue, le contenu est le suivant :

<template>
 <p class="tree-menu">
  <p>{{ label }}</p>
  <tree-menu 
  v-for="node in nodes" 
  :nodes="node.nodes"
  :label="node.label"
  >
  </tree-menu>
 </p>
 </template>
 <script>
 export default { 
  props: [ 'label', 'nodes' ],
  name: 'tree-menu'
 }
 </script>

Si vous utilisez un composant de manière récursive, vous devez d'abord donner à Vue.component une définition globale, ou lui donner un attribut name. Sinon, aucun composant enfant ne pourra l'appeler davantage et vous obtiendrez un message d'erreur non défini "Erreur de composant non défini".

Événements de base

Comme pour toute fonction récursive vous avez besoin d'un événement de base pour mettre fin à la récursion, sinon le rendu continuera indéfiniment, provoquant éventuellement un débordement de pile.

Dans le menu arborescent, nous souhaitons arrêter la récursion lorsque nous atteignons un nœud qui n'a pas d'enfant. Vous pouvez le faire avec v-if, mais nous choisissons d'utiliser v-for Ceci sera implémenté pour nous implicitement ; si le tableau de nœuds n'a pas de définition supplémentaire, le composant tree-menu sera appelé. Le fichier template.vue est le suivant :

<template>
 <p class="tree-menu">
  ...
  <!--If `nodes` is undefined this will not render-->
  <tree-menu v-for="node in nodes"></tree-menu>
 </template>

Utilisation

Comment utilisons-nous ce composant maintenant ? Tout d'abord, nous déclarons une instance Vue avec une structure de données comprenant l'attribut data et le composant treemenu défini. Le fichier app.js est le suivant :

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

N'oubliez pas que notre structure de données a un nœud racine. Nous commençons à appeler récursivement le composant TreeMenu à partir du modèle principal, en utilisant l'attribut root nodes aux props :

<p id="app">
 <tree-menu :label="tree.label" :nodes="tree.nodes"></tree-menu>
 </p>

Il est bon d'identifier visuellement la « profondeur » des sous-composants afin que les utilisateurs puissent avoir une idée de la structure des données dans l'interface utilisateur. Réalisons cela en indentant les nœuds enfants à chaque niveau.

Ceci est réalisé en ajoutant une définition d'accessoire de profondeur via TreeMenu. Nous utiliserons cette valeur pour lier dynamiquement les styles en ligne avec des transformations : nous utiliserons la règle CSS transform:translate pour l'étiquette de chaque nœud, créant ainsi un retrait. template.vue est modifié comme suit** :**

<template>
 <p class="tree-menu">
  <p :style="indent">{{ label }}</p>
  <tree-menu 
  v-for="node in nodes" 
  :nodes="node.nodes" 
  :label="node.label"
  :depth="depth + 1"
  >
  </tree-menu>
 </p>
 </template>
 <script>
 export default { 
  props: [ 'label', 'nodes', 'depth' ],
  name: 'tree-menu',
  computed: {
  indent() {
   return { transform: `translate(${this.depth * 50}px)` }
  }
  }
 }
 </script>

L'attribut de profondeur commence à zéro dans le modèle principal. Dans le modèle de composant ci-dessus, vous pouvez voir que cette valeur est incrémentée chaque fois qu'elle est transmise à un nœud enfant.

<p id="app">
 <tree-menu 
  :label="tree.label" 
  :nodes="tree.nodes"
  :depth="0"
 ></tree-menu>
 </p>

Remarque : N'oubliez pas de lier en V la valeur de profondeur pour vous assurer qu'il s'agit d'un type numérique JavaScript et non d'une String.

Développer/Réduire

Étant donné que les structures de données récursives peuvent être volumineuses, une bonne astuce d'interface utilisateur pour les afficher consiste à masquer tous les nœuds à l'exception du nœud racine afin que l'utilisateur puisse développer ou réduire les nœuds selon ses besoins.

Pour ce faire, nous ajouterons un salon immobilier local pour les enfants. Si sa valeur est False, le nœud enfant ne sera pas rendu. Cette valeur doit être basculée en cliquant sur le nœud, nous devons donc utiliser une méthode d'écoute d'événement de clic toggleChildren pour la gérer. Le fichier template.vue est modifié comme suit** :**

<template>
 <p class="tree-menu">
  <p :style="indent" @click="toggleChildren">{{ label }}</p>
  <tree-menu 
  v-if="showChildren"
  v-for="node in nodes" 
  :nodes="node.nodes" 
  :label="node.label"
  :depth="depth + 1"
  >
  </tree-menu>
 </p>
 </template>
 <script>
 export default { 
  props: [ 'label', 'nodes', 'depth' ],
  data() {
  return { showChildren: false }
  },
  name: 'tree-menu',
  computed: {
  indent() {
   return { transform: `translate(${this.depth * 50}px)` }
  }
  },
  methods: {
  toggleChildren() {
   this.showChildren = !this.showChildren;
  }
  }
 }
 </script>

Résumé

De cette façon, nous avons un menu arborescent fonctionnel. Comme touche finale, vous pouvez ajouter une icône plus/moins pour rendre l'interface utilisateur plus visible. J'ai également ajouté de très bonnes polices et performances informatiques basées sur le showChildren original

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur PHP. Site chinois !

Lecture recommandée :

Comment utiliser JSONAPI en PHP

Comment utiliser la garde de navigation de VueRouter

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!