本篇文章主要介紹了開發Vue樹形元件的範例程式碼，它展現了元件的遞歸使用。現在分享給大家，也給大家做個參考。
本文介紹了Vue樹狀元件的範例程式碼，分享給大家，具體如下：
使用SemanticUI和vue做一個menubar元件，實作方法大概是這樣的：
<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>使用時，假如父元件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的click事件觸發時並不會呼叫到頂層app元件events裡面定義的事件，而只是呼叫了父Menubar的events事件。
因此，要實作該機制，目前是採用元件之間的通訊機制來實現的：
<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="{{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)
}
}
}
}複製程式碼
程式碼如下:events:{
menuItemClick:function(item,$event){
if(!this.subMenu){
this.$parent.$emit(item.click,item)
}else{
return true
}
}
},#小結一下:
在處理巢狀結構的元件，如具有下拉式選單的工具列、樹狀元件等時，由於元件內部皆具有各自獨立的上下文，因此必須使用組件通訊機制來處理內部組件間的通訊。
但如此處理方式，我覺得還是比較麻煩的，理想的方式，我覺得最好的官方可以為元件提供一個直接使用父元件上下文的機制，例如：<MenuBar> <button scoped="false"></button> <button scoped="false"></button> </MenuBar>
在Angular4中有關CLI的安裝與使用教程
以上是使用Vue如何開發樹狀組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
