Ejemplo de código para desarrollar componentes de árboles en Vue

Este artículo introduce un ejemplo de código de componente de árbol en Vue y lo comparte con todos, como se muestra a continuación:

Se presenta aquí un método para crear un componente de barra de menú utilizando SemanticUI y Vue, que es más o menos así:

<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>  
   //si tiene children, significa que es un elemento de menú desplegable y luego se llama recursivamente a sí mismo 
    <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> 
  //Se muestra en el menú del lado derecho, también se llama a sí mismo recursivamente 
   <menubar :items="rightItems" v-if="rightItems.length > 0"></menubar> 
  </div> 
</template> 

Al usarlo, si el componente padre app utiliza el componente menubar, es necesario definir los datos items en data, por ejemplo:

menubar:[ 
     {id:"a",text:"páginaPrincipal"1",icon:"home",tips:"indicación",etiqueta:"33",colorDeEtiqueta:"rojo",url:"#"} 
     {id:"b",text:"menú",icon:"editar",tips:"indicación",url:"#",children:[ 
       {id:"a",text:"menú"1",click:"test"3",icon:"home",url:"#"} 
       {id:"a",text:"menú"2",click:"test"3",icon:"home",url:"#"} 
     ]} 
     {id:"bb",text:"editar",sección:"a",icon:"usuario",vlink:"#"}, 
     {id:"bb",text:"archivo",sección:"b",icon:"usuario",click:"test"1"}, 
     {id:"bb",text:"ayuda",sección:"c",icon:"ayuda",click:"test"2"}, 
     {id:"bb",text:"herramienta",icon:"usuario",url:"www.baidu.com"}, 
     {id:"c",text:"configuración",icon:"home",tips:"indicación",enabled:true,color:"azul",url:"#",right:true,label:"",children:[ 
        {id:"bbb",text:"configuración",icon:"home",tips:"indicación",click:"test"3"}, 
        {id:"adsd",text:"salir",icon:"home",tips:"indicación",vlink:"/"workdesk",url:"#"} 
        ] 
      }, 
   ] 

El evento click dentro de él está definido, que es el evento que ocurre al hacer clic en la barra de herramientas. En el caso ideal, la definición del evento debe estar en los eventos del componente padre app, como en el siguiente ejemplo:

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

El componente de barra de herramientas se genera en función de los items proporcionados, incluyendo sus componentes hijos. La estructura final del componente de barra de herramientas es una estructura en forma de árbol, similar a esta:

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

Debido a que cada componente de barra de herramientas tiene su propio contexto en cada Menubar, por lo que cuando se desencadena el evento de clic del subcomponente Menubar, no se llama al evento definido en los eventos del componente superior app, sino que solo se llama al evento de eventos del Menubar padre.

Pero en términos de experiencia de uso, es obvio que la definición del evento de clic del componente de barra de herramientas debe definirse en los eventos del componente app para ser razonable. Esperamos que menubar:[] defina los elementos del menú, sin importar cuántos niveles de nesting, el desencadenamiento del evento pueda burbujear hasta el padre superior de menubar.
Por lo tanto, para implementar este mecanismo, actualmente se utiliza el mecanismo de comunicación entre componentes para lograrlo:

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

definimos un evento @click="onMenuItemClick(item,$event)" en el código superior

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

En el momento de la activación de onMenuItemClick, confirmamos según el subMenu传入如何处理点击事件, si Menubar se maneja como una barra de menú secundaria, entonces simplemente rebotamos el evento hacia arriba, de lo contrario, se desencadena el evento en el componente padre superior.

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

Al llamar al componente menubar internamente, se pasa submenu=true y se escucha el evento menuItemClick, el código del evento menuItemClick es así:

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

Resumen:

Al manejar componentes de estructura anidada, como barras de herramientas con menús desplegables, componentes de árbol, etc., ya que todos los componentes internos tienen sus propios contextos independientes, es necesario usar el mecanismo de comunicación de componentes para manejar la comunicación entre componentes internos.

Pero este método de procesamiento, creo que es bastante molesto, la manera ideal, creo que lo mejor sería que el oficial pudiera proporcionar un mecanismo de uso directo del contexto del componente padre para los componentes, por ejemplo:

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

De esta manera, el botón superior no tiene su propio contexto y puede introducir directamente el contexto del componente padre, este modelo debería ser utilizado en muchas ocasiones.

Esto es todo el contenido de este artículo, espero que sea útil para su aprendizaje y que todos apoyen el tutorial de alarido.

Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha realizado un procesamiento editorial manual y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione evidencia. Si se verifica, este sitio eliminará inmediatamente el contenido sospechoso de infracción de derechos de autor.)