suchen

Heim >Web-Frontend >js-Tutorial >So verwenden Sie Vue zum Implementieren von Baumansichtsdaten

So verwenden Sie Vue zum Implementieren von Baumansichtsdaten

php中世界最好的语言
php中世界最好的语言Original
2018-05-23 13:39:171566Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie Vue zum Implementieren von Baumansichtsdaten verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Vue zum Implementieren von Baumansichtsdaten gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an .

Dies sind simulierte Treemap-Daten

let all={ 
  name:'all', 
  children:{ 
   A:{ 
    name:'A', 
    children:{ 
     a1:{ 
      name:'a1', 
      children:{ 
       a11:{  
        name:'a11', 
        children:null 
       }, 
       a12:{  
        name:'a12', 
        children:null 
       } 
      } 
     }, 
     a2:{ 
      name:'a2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   }, 
   B:{ 
    name:'B', 
    children:{ 
     b1:{ 
      name:'b1', 
      children:{ 
       b11:{  
        name:'b11', 
        children:null 
       }, 
       b12:{  
        name:'b12', 
        children:null 
       } 
      } 
     }, 
     b2:{ 
      name:'b2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   } 
  } 
 }

Der Code lautet wie folgt

treelist.vue

<template> 
<p> 
 <ul> 
  <li > 
   <span @click="isshow()">{{treelist.name}}</span> 
    <tree v-for="item in treelist.children"  
     v-if="isFolder" 
     v-show="open" 
     :treelist="item" 
     :keys="item" 
    ></tree> 
  </li> 
 </ul> 
</p> 
</template> 
<script> 
export default { 
 name:'tree', 
 props:['treelist'], 
 data(){ 
  return{ 
   open:false 
  } 
 },computed:{ 
  isFolder:function(){ 
   return this.treelist.children 
   } 
  } 
 ,methods:{ 
  isshow(){ 
   if (this.isFolder) { 
    this.open =!this.open 
   } 
  } 
 } 
} 
</script> 
<style lang="less"> 
</style>

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 <title>树形图</title> 
</head> 
<body> 
 <p id="app"> 
  <tree :treelist="treeList"></tree> 
   
 </p> 
</body> 
</html>

index.js

import Vue from 'vue'; 
import tree from '../components/treelist.vue' 
let all={ 
  name:'all', 
  children:{ 
   A:{ 
    name:'A', 
    children:{ 
     a1:{ 
      name:'a1', 
      children:{ 
       a11:{  
        name:'a11', 
        children:null 
       }, 
       a12:{  
        name:'a12', 
        children:null 
       } 
      } 
     }, 
     a2:{ 
      name:'a2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   }, 
   B:{ 
    name:'B', 
    children:{ 
     b1:{ 
      name:'b1', 
      children:{ 
       b11:{  
        name:'b11', 
        children:null 
       }, 
       b12:{  
        name:'b12', 
        children:null 
       } 
      } 
     }, 
     b2:{ 
      name:'b2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   } 
  } 
 } 
const app=new Vue({ 
 el:"#app", 
 components:{ 
  'tree':tree 
 }, 
 data:{ 
  treeList:all 
 } 
})

Nachdem ich die Fallstricke durchgegangen war, fand ich einen ähnlichen Fall auf der offiziellen Website von Vue, Link → Portal

Nachdem ich auf die Methode auf der offiziellen Website verwiesen hatte , Ich habe es versucht Der Unterschied zwischen dem Schreiben von

wie diesem und meiner Idee, als ich in die Falle trat, besteht darin, dass eine solche Komponente nur für ein Objekt verantwortlich ist, die Objekte in jedem Kind durchläuft und Übergibt sie einzeln zur Verarbeitung an die Komponente. Es handelt sich um eine Komponente, die mehrere Objekte verarbeitet, siehe unten.

Eine solche Komponente verarbeitet ein Objekt. Welche Vorteile hat das Schreiben?

Ich kann den Schalter innerhalb der Komponente anpassen

Ich habe die Variable offen definiert in Daten. Da die Komponente rekursiv ist, entspricht sie jeder Komponente.

Warum kann ich diese Methode dann nicht verwenden? Wenn ich zum ersten Mal die Grube betrete, besteht ein Versuch darin, dass eine Komponente mehrere Objekte verarbeitet. Dies entspricht einem Schalter, der alle Objekte in untergeordneten Objekten steuert. Wenn der Schalter aktiviert ist, werden alle Objekte derselben Ebene aktiviert zu erweitern

Untergeordnete Elemente durchlaufen und die Komponente selbst einzeln übergeben. Verwenden Sie v-show, um zu steuern, ob

definiert ein Berechnungs-

-Attribut , um zu bestimmen, ob die Ausführung basierend auf untergeordneten Elementen fortgesetzt werden soll

Binden Sie ein benutzerdefiniertes Ereignis an das Span-Tag

Ändern Sie den Wert von open 

<span @click="isshow()">{{treelist.name}}</span>

Erzielen Sie den Effekt

Das Folgende sind die Fallstricke, auf die ich gestoßen bin, als ich es zum ersten Mal versucht habe.

Notieren Sie es hier und hinterlassen Sie einen Eindruck, wenn Sie in Zukunft auf ähnliche Probleme stoßen.

Ich bin auf diesen Fehler gestoßen, als Ich bin zuerst auf

gestoßen. Nachdem ich lange nach dem Problem gesucht hatte, stellte ich fest, dass es daran lag, dass ich vergessen hatte, den Namen in die Komponente zu schreiben . Bei der Verwendung muss ich den Namen eingeben und er muss mit dem Tag-Namen übereinstimmen

Die anfängliche Implementierungsmethode verwendet Komponentenrekursion zur Anzeige den Namen der aktuellen Ebene und rendert sie, übergibt alle Objekte in den untergeordneten Ebenen an sich selbst und führt dann den gleichen Vorgang aus, bis die untergeordneten Elemente keine Daten mehr haben. Es ist erwähnenswert, dass

Wenn v-if hier nicht hinzugefügt wird, wird es zu einer Endlosschleife und wird weiterhin ausgeführt. Daher müssen wir feststellen, ob das aktuell ausgeführte Objekt noch am Leben ist Ebene?

Meine Daten wurden hier leicht geändert, daher sind die Daten, die ich zum ersten Mal übergeben habe, (index.html-Seite)

Dann habe ich ein Ereignis definiert, um das Schließen und Öffnen jeder Ebene zu verwalten. Ich habe ein Popup-Fenster verwendet, um zu überprüfen, ob der Wert von Isopen geändert wurde

Sehen wir uns die Ergebnisse an

Wenn Sie die Seite zum ersten Mal betreten, ist das Undefinierte in den Klammern der aktuelle Wert von Isopen, da er nicht definiert ist Diesmal ist es undefiniert

Dann habe ich auf A geklickt

Weil isopen zu diesem Zeitpunkt invertiert wurde, also isopen ist derzeit wahr

Aber die Seite hat sich immer noch nicht geändert, ganz zu schweigen von der Erweiterungsfunktion, auch undefiniert hat sich nicht geändert

Nach einigem Baidu habe ich festgestellt, dass Vue selbst keine direkten Änderungen an den von Props empfangenen Werten mehr zulässt.

Nach Vue2.0 können Unterkomponenten den Wert von nicht mehr ändern Die übergeordnete Komponente reagiert nur über die Unterkomponente $emit(). Die übergeordnete Komponente $on() reagiert auf Änderungen

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Angular zur Implementierung der Datenanforderungsfunktion

So verwenden Sie Vue+better-scroll um eine alphabetische Indexnavigation zu implementieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue zum Implementieren von Baumansichtsdaten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So implementieren Sie die DOM-Baumdurchquerung mit JSNächster Artikel：So implementieren Sie die DOM-Baumdurchquerung mit JS

In Verbindung stehende Artikel

Mehr sehen