English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Esempio di codice per lo sviluppo di un componente ad albero Vue

Questo articolo introduce esempi di codice di componenti a albero Vue, li condivido con tutti, come segue:

Creare un componente menubar con SemanticUI e Vue, il metodo è più o meno così:

<template> 
  <div class="ui menu"> 
   <template v-for="item in leftItems"> 
    <a " v-if="!item.children" @click="item.click"> 
     <i class="{{ item.icon }} icon" v-if="item.icon"></i>{{item.text}} 
     <div class="ui mini {{item.labelColor }} label" v-if="item.label"> 
      {{item.label}} 
     </div> 
    </a>  
   //Se ci sono children, significa che è un item di menu a discesa, quindi chiamata ricorsiva di sé stessa 
    <template v-else="item.children.length > 0"> 
     <div class="ui dropdown item"> 
      <i class="{{ item.icon }} icon" v-if="item.icon"></i>   
      <div class="text"> {{item.text}}</div> 
      <menubar :items="item.children"></menubar> 
     </div> 
    </template> 
   </template> 
  //Mostra i menu item di destra, anche chiamata ricorsiva di sé stessa 
   <menubar :items="rightItems" v-if="rightItems.length > 0"></menubar> 
  </div> 
</template> 

Quando si utilizza, se il componente padre app utilizza il componente menubar, è necessario definire i dati items nel data, ad esempio:

menubar:[ 
     {"id:\"a\",text:\"homepage1\",icon:\"home\",tips:\"promemoria\",label:\"33\",labelColor:\"red\",url:\"#\"} 
     {"id:\"b\",text:\"menu\",icon:\"edit\",tips:\"promemoria\",url:\"#\",children:[ 
       {"id:\"a\",text:\"menu1\",click:\"test3\",icon:\"home\",url:\"#\"} 
       {"id:\"a\",text:\"menu2\",click:\"test3\",icon:\"home\",url:\"#\"} 
     ]} 
     {"id:\"bb\",text:\"modifica\",tab:\"a\",icon:\"user\",vlink:\"#\"}, 
     {"id:\"bb\",text:\"file\",tab:\"b\",icon:\"user\",click:\"test1\"}, 
     {"id:\"bb\",text:\"aiuto\",tab:\"c\",icon:\"help\",click:\"test2\"}, 
     {"id:\"bb\",text:\"strumenti\",icon:\"user\",url:\"www.baidu.com\"}, 
     {"id:\"c\",text:\"impostazioni\",icon:\"home\",tips:\"promemoria\",enabled:true,color:\"blue\",url:\"#\",right:true,label:\"\",children:[ 
        {"id:\"bbb\",text:\"configurazione\",icon:\"home\",tips:\"promemoria\",click:\"test3\"}, 
        {"id:\"adsd\",text:\"uscita\",icon:\"home\",tips:\"promemoria\",vlink:\"/workdesk\",url:\"#\"} 
        ] 
      }, 
   ] 

L'evento click all'interno è definito, l'evento che si verifica quando si fa clic sulla barra degli strumenti, nella situazione ideale l'evento dovrebbe essere definito nei eventi del componente padre app, come segue:

events:{ 
  eventa:function(){....}, 
  eventb:function(){....}, 
}, 

Il componente della barra degli strumenti è generato in base agli items forniti, inclusi i componenti figli. La struttura finale del componente della barra degli strumenti è una struttura ad albero, simile a questa:

MenuBar
--MenuBar                   
----MenuBar
-----MenuBar
--Menubar

Poiché ogni componente toolbar ha il proprio contesto Menubar, quindi quando si verifica l'evento di cliccato del subcomponente Menubar, non viene chiamato l'evento definito negli eventi del componente app superiore, ma solo l'evento degli eventi del padre Menubar.

Ma chiaramente, in termini di esperienza utente, la definizione dell'evento di cliccato del componente toolbar dovrebbe essere definita all'interno degli eventi del componente app per essere ragionevole. Speriamo che la definizione di menubar:[] per i menu item, indipendentemente dal numero di livelli di nesting, l'evento di trigger possa bubbling fino al padre superiore di menubar.
Pertanto, per implementare questo meccanismo, al momento si utilizza il meccanismo di comunicazione tra componenti per realizzarlo:

<a @click="onMenuItemClick(item,$event)" data-tab="{{item.tab}}" v-link="item.vlink" href="{{item.url}}" rel="external nofollow" v-if="!item.children" :class="[{'active':item.active==true,'disabled':item.enabled==false},item.color,'item']" title="[#1#]"> 
     <i class="{{ item.icon }} icon" v-if="item.icon"></i>{{item.text}} 
     <div class="ui mini {{item.labelColor }} label" v-if="item.label"> 
      {{item.label}} 
     </div> 
    </a> 

definire un evento @click="onMenuItemClick(item,$event)" sopra

methods:{ 
  onMenuItemClick:function(item,$event){    
   if(this.subMenu){ 
    this.$dispatch("menuItemClick",item,$event)  
   }else{ 
    if(item.click){ 
     this.$parent.$emit(item.click,item) 
    }, 
   },   
  }, 
 }, 

Quando si verifica l'evento onMenuItemClick, confermiamo come gestire l'evento di cliccato in base al subMenu passato, se Menubar viene trattato come sottomenu, trasmettiamo direttamente l'evento in modo bubbling, altrimenti lo trigghiamo nel componente padre superiore.

<menubar  @menuItemClick="onMenuItemClick" :items="rightItems" sub-menu="true" v-if="rightItems.length > 0"></menubar> 

Quando si chiama il componente menubar internamente, si passa submenu=true e si ascolta l'evento menuItemClick, il codice dell'evento menuItemClick è così:

events:{ 
  menuItemClick:function(item,$event){ 
   if(!this.subMenu){ 
    this.$parent.$emit(item.click,item) 
   }else{ 
    return true 
   }, 
  }, 
 }, 

Concludendo:

Quando si gestiscono componenti con struttura nididata, come le barre degli strumenti con menu a discesa, i componenti ad albero, ecc., poiché i componenti interni hanno contesti indipendenti, è necessario utilizzare il meccanismo di comunicazione tra componenti per gestire la comunicazione tra i componenti interni.

Ma penso che questo metodo sia piuttosto complicato, il modo ideale, penso che il migliore sarebbe per il team ufficiale di fornire un meccanismo di utilizzo diretto del contesto del componente padre per i componenti, ad esempio:

<MenuBar> 
 <button scoped="false"></button> 
<button scoped="false"></button> 
</MenuBar> 

In questo modo, il pulsante sopra non ha il proprio contesto e può direttamente introdurre il contesto del componente padre, questo modello dovrebbe essere utilizzato in molte occasioni.

Questo è tutto il contenuto dell'articolo, spero che sia utile per la tua apprendimento e ti prego di sostenere fortemente la guida all'urlo.

Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il copyright spetta ai rispettivi autori, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene il diritto di proprietà, non è stato elaborato manualmente e non assume alcuna responsabilità legale connessa. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.

Ti potrebbe interessare