Vue を使用してツリー コンポーネントを開発する方法

この記事では主に、コンポーネントの再帰的な使用方法を示す、Vue ツリー コンポーネントを開発するためのサンプル コードを紹介します。今、それをあなたに共有し、参考として提供します。

この記事ではVueツリーコンポーネントのサンプルコードを紹介し、皆さんに共有します。 詳細は以下の通りです:

SemanticUIとvueを使ってメニューバーコンポーネントを作成する 実装方法はおそらく次のようになります:

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

を使用する場合。親コンポーネント アプリがメニューバー コンポーネントを使用している場合、データ内で項目データを定義する必要があります。たとえば、ツールバーがクリックされたときに

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:"#"} 
        ] 
      } 
   ]

のクリック イベントが定義される必要があります。は、親コンポーネント アプリのイベントで次のように定義されます。

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

ツールバー コンポーネントは、内部のサブコンポーネントを含む受信アイテムに基づいて生成されます。最終的なツールバー コンポーネントの構造はツリー構造です。例:

MenuBar
--MenuBar各メニューバーには独自のコンテキストがあるため、サブコンポーネントのメニューバーのクリック イベントがトリガーされると、最上位のアプリコンポーネントは呼び出されず、親メニューバーのイベントのみが呼び出されます。

しかし、ユーザー エクスペリエンスの観点からは、ツールバー コンポーネントのクリック イベント定義をアプリ コンポーネントのイベントで定義する必要があることは明らかです。 menubar:[] がメニュー項目を定義するとき、それがネストのレベルに関係なく、イベントのトリガーが最上位のメニューバーの親までバブルアップできることを願っています。
したがって、このメカニズムを実装するために、コンポーネント間の通信メカニズムが現在使用されています:

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

上記はイベント @click="onMenuItemClick(item,$event)" を定義します

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

onMenuItemClick がトリガーされると、受信したsubMenu は、クリック イベントがどのように処理されるかを確認するために使用されます。メニューバーがサブメニュー バーとして処理される場合は、イベントを上に直接バブルします。それ以外の場合、イベントは上部の親コンポーネントでトリガーされます。

コードをコピーします

コードは次のとおりです:

68f6a2bf338ff7cb1ee408bb7bbd12a9 0"> 61ef41fb981a5b87a72024a468870e1f

menubar コンポーネント内で呼び出す場合は、submenu=true を渡し、menItemClick イベント コードをリッスンします:

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

要約すると:

ドロップダウン メニューなどのネストされた構造 ツールバー、ツリー コンポーネントなどを使用する場合、各コンポーネントには独自の独立したコンテキストがあるため、内部コンポーネント間の通信を処理するにはコンポーネント通信メカニズムを使用する必要があります。

しかし、この処理方法はまだかなり面倒だと思います。理想的には、コンポーネントが親コンポーネントのコンテキストを直接使用するメカニズムを提供することが最善の公式の方法だと思います。たとえば、次のようにします。 、上のボタンには独自のコンテキストがなく、親コンポーネントのコンテキストを直接導入できるため、このパターンは多くの状況で使用する必要があります。

上記は私があなたのためにまとめたものです。

関連記事:

Angular4でのCLIのインストールと使用に関するチュートリアル

Vue2.animate.cssを使用してJSONツリーを実装する方法(詳細なチュートリアル)

vuexでアイドル状態リセットを実装する方法

以上がVue を使用してツリー コンポーネントを開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。