Vue.js rekursiver Komponentenbaummenü aufbauen

In Vue.js, a recursive component calls itself, such as:

Vue.component('recursive-component', {
 template: `<!--Ich rufe mich selbst auf!-->
    <recursive-component></recursive-component>
 });

Rekursive Komponenten werden oft verwendet, um Kommentare in Blogs anzuzeigen, eingebettete Menüs oder grundsätzlich gleiche Typen von Eltern und Kindern, obwohl der spezifische Inhalt unterschiedlich ist. Zum Beispiel:

Jetzt zeige ich Ihnen, wie man rekursive Komponenten effektiv verwendet, indem ich einen erweiterbaren/Wir führen das Zusammenklappen des Baummenüs Schritt für Schritt durch.

Datenstruktur

Ein rekursives UI-Komponente für Baumstruktur ist eine visuelle Darstellung einiger rekursiver Datenstrukturen. In diesem Tutorial verwenden wir Baumstruktur, bei der jeder Knoten ein Objekt ist:

Ein label-Attribut.

Wenn es Unter knoten hat, eine nodes-Attribut, dann ist es ein oder mehrere Knoten-Array-Attribut.

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

let tree = {
 label: 'root',
 nodes: [
  {
  label: 'item'1',
  nodes: [
   {
   label: 'item'1.1'
   },
   {
   label: 'item'1.2',
   nodes: [
    {
    label: 'item'1.2.1'
    }
   ]
   }
  ]
  }, 
  {
  label: 'item'2' 
  }
 ]
 }

Rekursive Komponente

Lassen Sie uns ein rekursives Komponente machen, um unsere Datenstruktur TreeMenu anzuzeigen. Es zeigt nur das Label des aktuellen Knotens und ruft sich selbst auf, um jeden Unter knoten anzuzeigen. Dateiname: TreeMenu.vue, Inhalt wie folgt:

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

Wenn du eine komponente rekursiv verwendest, musst du Vue.component eine globale Definition geben oder ihr einen name-Attribut geben. Andernfalls kann jeder Unter-Komponente nicht weiter darauf zugreifen, und du bekommst eine unbestimmte Fehlermeldung "undefined component error".

Basisevent

Wie jeder rekursive Funktion brauchst du ein Basisevent, um die Rekursion zu beenden,否则渲染将无限期地继续下去，最终会导致堆栈溢出。

Im Baummenü, wenn wir einen Knoten erreichen, der keine Unter knoten hat, möchten wir rekursiv aufhören. Du kannst das durch v tun-wenn dies die Funktion erfüllt, aber wir haben uns für v entschieden-for wird implizit für uns umgesetzt; wenn die nodes-Array keine weitere Definition enthält tree-Das menu-Component wird aufgerufen. Die template.vue-Datei sieht folgendermaßen aus:

<template>
 <div class="baum-menu">
  ...
  <!--Wenn `nodes` nicht definiert ist, wird dies nicht gerendert-->
  <baum-menu v-for="node in nodes"></tree-menu>
 </template>

Verwendung

Wie verwenden wir dieses Komponente? Zunächst erklären wir eine Vue-Instanz, die eine Datenstruktur mit dem Attribut data und dem definierten treemenu-Component enthält. Der app.js-Datei sieht folgendermaßen aus:

 import TreeMenu von '.'}/TreeMenu.vue'
 let tree = {
 ...
 }
 new Vue({
 el: '#app',
 daten: {
  tree
 },
 komponenten: {
  TreeMenu
 }
 )

Denken Sie daran, dass unsere Datenstruktur einen Wurzelknoten hat. Wir rufen den TreeMenu-Komponenten im Haupttemplate rekursiv auf, indem wir die Root-Knoten-Property als props verwenden:

<div id="app">
 <baum-menu :Beschriftung="baum.Beschriftung" :Knoten="baum.Knoten"></tree-menu>
 </div>

Hier ist es derzeit so:

Richtige Haltung

Es ist gut, die "Tiefe" des Unter-komponenten visuell zu erkennen, damit der Benutzer das Gefühl für die Datenstruktur aus der UI erhält. Lassen Sie uns jeden Ebenen-Kindknoten einklappen, um dieses Ziel zu erreichen.

Dies wird durch das Hinzufügen eines Tiefe-Props definiert, um durch TreeMenu umzusetzen. Wir verwenden diesen Wert, um dynamisch Inline-Stile mit Transformationen zu binden: Wir verwenden die CSS-Regel transform: translate für jede Knotenbeschriftung, um Einfügbereich zu erzeugen. Die Änderungen an der Datei template.vue lauten wie folgt**：**

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

Die Tiefe-Eigenschaft beginnt im Haupttemplate mit Null. In der obigen Komponentenvorlage kann man sehen, dass dieser Wert jedes Mal um 1 erhöht wird, wenn er an jeden Unter-knoten weitergegeben wird.

<div id="app">
 <baum-menu 
  :Beschriftung="baum.Beschriftung" 
  :Knoten="baum.Knoten"
  :Tiefe="0"
 ></tree-menu>
 </div>

Hinweis: Denke daran, v-bind depth-Wert, um sicherzustellen, dass es sich um eine JavaScript-Zahl handelt und nicht um einen String.

Ausklappen/Einklappen

Da rekursiv aufgebauten Datenstrukturen sehr groß sein können, ist es eine gute UI-Technik, außer dem Wurzelknoten alle Knoten zu verbergen, damit der Benutzer die Knoten nach Bedarf ausklappen oder einklappen kann.

Daher werden wir eine lokale Eigenschaft showChildren hinzufügen. Wenn dieser Wert False ist, werden die Kindknoten nicht gerendert. Dieser Wert sollte durch das Klicken auf den Knoten umgeschaltet werden, daher benötigen wir einen Einmaligereignis-Listener-Methode toggleChildren zur Verwaltung. Die Änderungen an der Datei template.vue lauten wie folgt**：**

<template>
 <div class="baum-menu">
  <div :style="Einzugsbereich" @click="KinderUmschalten">{{ Beschriftung }}</div>
  <baum-menu 
  v-if="showChildren""
  v-for="node in nodes" 
  :nodes="node.nodes" 
  :label="node.label"
  :depth="depth + 1"
  >
  </tree-menu>
 </div>
 </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

So haben wir ein Arbeitsbaummenü. Eine Methode, um es zu verfeinern, ist, dass Sie ein Pluszeichen hinzufügen können/Das Minus-Symbol, so dass die Anzeige der UI deutlicher wird. Ich habe auch sehr gute Schriftarten und Berechnungsleistung auf der Grundlage von showChildren hinzugefügt.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrechtlichem Inhaber. Der Inhalt wurde von Internetbenutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie Inhalte finden, die möglicherweise gegen das Urheberrecht verstoßen, freuen wir uns über eine E-Mail an: notice#w, und stellen Sie bitte relevante Beweise zur Verfügung. Bei nachgewiesener Infringement wird der fragliche Inhalt sofort gelöscht.3Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrechtlichem Inhaber. Der Inhalt wurde von Internetbenutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie Inhalte finden, die möglicherweise gegen das Urheberrecht verstoßen, freuen wir uns über eine E-Mail an: notice#w, und stellen Sie bitte relevante Beweise zur Verfügung. Bei nachgewiesener Infringement wird der fragliche Inhalt sofort gelöscht.