Comment développer des composants d'arborescence à l'aide de Vue

Cet article présente principalement l'exemple de code pour développer des composants d'arborescence Vue, qui montre l'utilisation récursive des composants. Maintenant, je le partage avec vous et le donne comme référence.

Cet article présente l'exemple de code du composant d'arborescence Vue et le partage avec tout le monde. Les détails sont les suivants :

Utilisez SemanticUI et vue pour créer un composant de barre de menus. suit :

<template> 
  <p 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}} 
     <p class="ui mini {{item.labelColor }} label" v-if="item.label"> 
      {{item.label}} 
     </p> 
    </a>  
   //如果有有children则说明是下拉菜单项，然后递归调用自身 
    <template v-else="item.children.length > 0"> 
     <p class="ui dropdown item"> 
      <i class="{{ item.icon }} icon" v-if="item.icon"></i>   
      <p class="text"> {{item.text}}</p> 
      <menubar :items="item.children" ></menubar> 
     </p> 
    </template> 
   </template> 
  //显示在右侧的菜单项，也是递归调用自身 
   <menubar :items="rightItems" v-if="rightItems.length > 0"></menubar> 
  </p> 
</template>

, si l'application du composant parent utilise le composant barre de menus, les données des éléments doivent être définies dans les données. Par exemple : l'événement de clic dans

<🎜. > est défini. Lorsque dans la barre d'outils Pour les événements lorsque vous cliquez dessus, idéalement, l'événement doit être défini dans les événements de l'application du composant parent, comme ceci :

menubar:[ 
     {id:"a",text:"主页1",icon:"home",tips:"提示",label:"33",labelColor:"red",url:"#"}, 
     {id:"b",text:"菜单",icon:"edit",tips:"提示",url:"#",children:[ 
       {id:"a",text:"菜单1",click:"test3",icon:"home",url:"#"}, 
       {id:"a",text:"菜单2",click:"test3",icon:"home",url:"#"} 
     ]}, 
     {id:"bb",text:"编辑",tab:"a",icon:"user",vlink:"#"}, 
     {id:"bb",text:"文件",tab:"b",icon:"user",click:"test1"}, 
     {id:"bb",text:"帮助",tab:"c",icon:"help",click:"test2"}, 
     {id:"bb",text:"工具",icon:"user",url:"www.baidu.com"}, 
     {id:"c",text:"设置",icon:"home",tips:"提示",enabled:true,color:"blue",url:"#",right:true,label:"",children:[ 
        {id:"bbb",text:"配置",icon:"home",tips:"提示",click:"test3"}, 
        {id:"adsd",text:"退出",icon:"home",tips:"提示",vlink:"/workdesk",url:"#"} 
        ] 
      } 
   ]

Le composant de la barre d'outils est généré en fonction des éléments entrants. , y compris les enfants à l'intérieur des composants. La structure finale du composant barre d'outils est une structure arborescente, par exemple :

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

MenuBar

--MenuBar                                                                                             --Menubar

Étant donné que chaque barre de menus de chaque composant de barre d'outils a son propre contexte, lorsque l'événement click de la barre de menus du sous-composant est déclenché, l'événement défini dans les événements du composant d'application de niveau supérieur ne sera pas appelé, mais appelle simplement les événements de la barre de menus parent.

Mais en termes d'expérience utilisateur, il est évident que la définition de l'événement de clic du composant barre d'outils doit être définie dans les événements du composant application. Nous espérons que lorsque menubar:[] définit un élément de menu, quel que soit le nombre de niveaux d'imbrication, le déclenchement de l'événement pourra remonter jusqu'au parent de la barre de menu supérieure.
Par conséquent, pour implémenter ce mécanisme, le mécanisme de communication entre composants est actuellement utilisé :

Ce qui précède définit un événement @click="onMenuItemClick(item,$event)"

Lorsque onMenuItemClick est déclenché, nous confirmons comment l'événement de clic est traité en fonction du sous-menu entrant. Si la barre de menus est traitée comme une barre de sous-menu, nous ferons directement remonter l'événement, sinon il sera déclenché en haut. composant parent.

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

Copier le code

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

Le code est le suivant :

Lors de l'appel à l'intérieur du composant menubar, transmettez submenu=true et écoutez l'événement menuItemClick. Le code de l'événement menuItemClick est le suivant. :

Pour résumer :

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

Lorsque vous traitez des composants avec des structures imbriquées, tels que des barres d'outils avec des menus déroulants, des composants arborescents, etc., puisque chaque Le composant a son propre contexte indépendant. Par conséquent, un mécanisme de communication entre composants doit être utilisé pour gérer la communication entre les composants internes.

Mais je pense que cette façon de gérer cela est toujours gênante, idéalement, je pense que la meilleure manière officielle peut fournir un mécanisme permettant aux composants d'utiliser directement le contexte du composant parent, par exemple : <🎜. >

De cette façon, le bouton ci-dessus n'a pas son propre contexte, mais peut introduire directement le contexte du composant parent. Ce mode doit être utilisé dans de nombreuses situations.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

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

Tutoriel sur l'installation et l'utilisation de CLI dans Angular4

Comment implémenter l'arborescence JSON à l'aide de Vue2.x

Fichier de configuration vue-cli (tutoriel détaillé)

Utilisation de jQuery pour encapsuler animate.css (tutoriel détaillé)

Comment réinitialiser l'état d'inactivité dans vuex

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!