本文介紹了Vue樹形組件的示例代碼，分享給大家，具體如下：

使用SemanticUI和vue做一個menubar組件，實現方法大概是這樣的：

<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>     //如果有有children則說明是下拉菜單項，然后遞歸調用自身     <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>   //顯示在右側的菜單項，也是遞歸調用自身    <menubar :items="rightItems" v-if="rightItems.length > 0"></menubar>   </div> </template> 

使用時，假如父組件app使用到了menubar組件，那么data中需要定義一下items數據，例 :

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

里面的click事件是定義了，當在工具欄中單擊時的事件，理想的情況應該是事件定義在父組件app的events里面，像這樣:

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

工具欄組件是根據傳入的items來生成的，包括里面的子組件。最終工具欄組件的結構就是一個樹狀結構，例似這樣的：

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

由于每個工具欄組件里面的每個Menubar均有自己的上下文，這樣當子組件Menubar的click事件觸發時并不會調用到頂層app組件events里面定義的事件，而只是調用了父Menubar的events事件。