So bauen Sie eine rekursive Komponente in ein Baummenü in Vue.js ein

Dieses Mal zeige ich Ihnen, wie Sie mit Vue.js eine rekursive Komponente in ein Baummenü einbauen. Was sind die Vorsichtsmaßnahmen für den Einbau einer rekursiven Komponente in ein Baummenü mit Vue.js? ? Im Folgenden werfen wir einen Blick auf praktische Fälle.

In Vue.js nennt sich eine rekursive Komponente selbst, wie zum Beispiel:

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

Rekursive Komponenten werden häufig verwendet, um Kommentare in Blogs, in verschachtelten Menüs oder grundsätzlich vom gleichen Typ wie übergeordnetes und untergeordnetes Element anzuzeigen, wenn auch mit unterschiedlichem Inhalt.

Um Ihnen nun zu zeigen, wie Sie rekursive Komponenten effektiv nutzen, werde ich Schritt für Schritt vorgehen und ein erweiterbares/reduzierbares Baummenü erstellen.

Datenstruktur

Eine rekursive Komponente einer Baum-Benutzeroberfläche wäre eine visuelle Darstellung einer rekursiven Datenstruktur. In diesem Tutorial verwenden wir eine Baumstruktur, in der jeder Knoten ein Objekt ist:

Ein Label--Attribut .

Wenn es untergeordnete Knoten hat, ist eine Knoteneigenschaft eine Array-Eigenschaft eines oder mehrerer Knoten.

Wie alle Baumstrukturen muss sie einen Wurzelknoten haben, kann aber unendlich tief sein.

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

Rekursive Komponenten

Lassen Sie uns eine rekursive Komponente namens TreeMenu erstellen, um unsere Datenstruktur anzuzeigen. Es zeigt nur die Beschriftung des aktuellen Knotens an und ruft sich selbst auf, um alle untergeordneten Knoten anzuzeigen. Dateiname: TreeMenu.vue, der Inhalt lautet wie folgt:

<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>

Wenn Sie eine Komponente rekursiv verwenden, müssen Sie Vue.component zunächst eine globale Definition oder ein Namensattribut geben. Andernfalls kann eine untergeordnete Komponente sie nicht weiter aufrufen und Sie erhalten eine undefinierte Fehlermeldung „Undefinierter Komponentenfehler“.

Grundlegende Ereignisse

Wie bei jeder rekursiven Funktion benötigen Sie ein Basisereignis, um die Rekursion zu beenden, andernfalls wird das Rendern auf unbestimmte Zeit fortgesetzt, was schließlich zu einem Stapelüberlauf führt.

Im Baummenü wollen wir die Rekursion stoppen, wenn wir einen Knoten erreichen, der keine Kinder hat. Sie können dies mit v-if tun, wir entscheiden uns jedoch für die Verwendung von v-for Dies wird für uns implizit implementiert; wenn das Knotenarray keine weitere Definition hat, wird die Baummenükomponente aufgerufen. Die template.vue-Datei lautet wie folgt:

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

Verwendung

Wie nutzen wir diese Komponente jetzt? Zuerst deklarieren wir eine Vue-Instanz mit einer Datenstruktur, die das Datenattribut und die definierte Treemenu-Komponente enthält. Die app.js-Datei lautet wie folgt:

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

Denken Sie daran, dass unsere Datenstruktur einen Wurzelknoten hat. Wir beginnen mit dem rekursiven Aufruf der TreeMenu-Komponente aus der Hauptvorlage und verwenden dabei das Wurzelknotenattribut für Requisiten:

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

Es ist gut, die „Tiefe“ von Unterkomponenten visuell zu erkennen, damit Benutzer über die Benutzeroberfläche ein Gefühl für die Datenstruktur bekommen. Dies erreichen wir, indem wir die untergeordneten Knoten auf jeder Ebene einrücken.

Dies wird durch das Hinzufügen einer Tiefenstützendefinition über TreeMenu erreicht. Wir werden diesen Wert verwenden, um Inline-Stile dynamisch mit Transformationen zu verknüpfen: Wir verwenden die CSS-Regel transform:translate für die Beschriftung jedes Knotens und erstellen so einen Einzug. template.vue wird wie folgt geändert**:**

<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>

Das Tiefenattribut beginnt in der Hauptvorlage bei Null. In der obigen Komponentenvorlage können Sie sehen, dass dieser Wert jedes Mal erhöht wird, wenn er an einen untergeordneten Knoten übergeben wird.

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

Hinweis: Denken Sie daran, den Tiefenwert mit einer V-Bindung zu versehen, um sicherzustellen, dass es sich um einen JavaScript-Zahlentyp und nicht um einen String handelt.

Erweitern/Reduzieren

Da rekursive Datenstrukturen groß sein können, besteht ein guter UI-Trick für ihre Anzeige darin, alle Knoten außer dem Stammknoten auszublenden, damit der Benutzer die Knoten nach Bedarf erweitern oder reduzieren kann.

Dazu fügen wir eine lokale Eigenschaft showChildren hinzu. Wenn der Wert False ist, wird der untergeordnete Knoten nicht gerendert. Dieser Wert sollte durch Klicken auf den Knoten umgeschaltet werden, daher müssen wir eine Click-Event-Listener-Methode toggleChildren verwenden, um ihn zu verwalten. Die Datei template.vue wird wie folgt geändert**:**

<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>

Zusammenfassung

Auf diese Weise haben wir ein funktionierendes Baummenü. Als letzten Schliff können Sie ein Plus-/Minus-Symbol hinzufügen, um die Benutzeroberfläche besser sichtbar zu machen. Ich habe auch sehr gute Schriftarten und Rechenleistung hinzugefügt, die auf der ursprünglichen ShowChildren basieren.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!

Empfohlene Lektüre:

So verwenden Sie JSONAPI in PHP

So verwenden Sie den Navigationsschutz von VueRouter

Das obige ist der detaillierte Inhalt vonSo bauen Sie eine rekursive Komponente in ein Baummenü in Vue.js ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!