So erstellen Sie ein Baummenü durch rekursive Komponenten in Vue.js

In diesem Artikel werden hauptsächlich die Lehrinhalte der Verwendung der rekursiven Komponenten von Vue.j zum Erstellen eines zusammenklappbaren Baummenüs vorgestellt. Interessierte Freunde können folgen und lernen.

In Vue.js ruft sich eine rekursive Komponente selbst auf, z. B.:

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

Rekursive Komponenten werden häufig zum Anzeigen von Kommentaren, verschachtelten Menüs in Blogs oder im Grunde genommen für übergeordnete und untergeordnete Komponenten verwendet Einzelheiten sind unterschiedlich. Zum Beispiel:

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

Datenstrukturen

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

eine Beschriftungseigenschaft.

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

Wie alle Baumstrukturen muss es 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 Komponente

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: [ &#39;label&#39;, &#39;nodes&#39; ],
  name: &#39;tree-menu&#39;
 }
 </script>

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

Grundlegende Ereignisse

Wie bei jeder rekursiven Funktion benötigen Sie ein Grundereignis, 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 über v-if tun, aber unsere Entscheidung, v-for zu verwenden, implementiert es implizit für uns; wenn das Knotenarray keine weiteren Definitionen 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 verwenden 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 in der Hauptvorlage und verwenden dabei das Wurzelknotenattribut für Requisiten:

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

So sieht es derzeit aus:

Richtige Haltung

Es ist gut, die „Tiefe“ von Unterkomponenten visuell zu erkennen, damit Benutzer ein Gefühl für die Datenstruktur der Benutzeroberfläche 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: [ &#39;label&#39;, &#39;nodes&#39;, &#39;depth&#39; ],
  name: &#39;tree-menu&#39;,
  computed: {
  indent() {
   return { transform: `translate(${this.depth * 50}px)` }
  }
  }
 }
 </script>

Tiefenattribut beginnt in der Hauptvorlage bei Null. In der Komponentenvorlage oben 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 per V-Bindung festzulegen, um sicherzustellen, dass es sich um einen JavaScript-Zahlentyp und nicht um eine Zeichenfolge handelt.

Erweitern/Reduzieren

Da rekursive Datenstrukturen groß sein können, besteht ein guter UI-Trick für deren Anzeige darin, alle Knoten außer dem Stammknoten auszublenden, damit der Benutzer die Knoten sehen kann, die er benötigt erweitert oder reduziert werden.

Dazu fügen wir ein lokales Attribut 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: [ &#39;label&#39;, &#39;nodes&#39;, &#39;depth&#39; ],
  data() {
  return { showChildren: false }
  },
  name: &#39;tree-menu&#39;,
  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. Außerdem habe ich dem Original von showChildren großartige Schriftarten und Rechenfunktionen hinzugefügt.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie einen mausresponsiven Taobao-Animationseffekt in jQuery

Mausreaktionspuffer-Animationseffekt implementiert durch jQuery

So implementieren Sie die Reaktionsfähigkeit von vue2.0 (ausführliches Tutorial)

Wie Sie mit JS einen intermittierenden Text-Scroll-Effekt erzielen

Refs in React im Detail erklären (ausführliches Tutorial)

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