開發(fā)Vue樹形組件的示例代碼
本文介紹了Vue樹形組件的示例代碼，分享給大家，具體如下：
使用SemanticUI和vue做一個(gè)menubar組件，實(shí)現(xiàn)方法大概是這樣的：
<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則說明是下拉菜單項(xiàng)，然后遞歸調(diào)用自身
<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>
//顯示在右側(cè)的菜單項(xiàng)，也是遞歸調(diào)用自身
<menubar :items="rightItems" v-if="rightItems.length > 0"></menubar>
</div>
</template>
使用時(shí)，假如父組件app使用到了menubar組件，那么data中需要定義一下items數(shù)據(jù)，例 :
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:"設(shè)置",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事件是定義了，當(dāng)在工具欄中單擊時(shí)的事件，理想的情況應(yīng)該是事件定義在父組件app的events里面，像這樣:
events:{
eventa:function(){....},
eventb:function(){....},
}
工具欄組件是根據(jù)傳入的items來生成的，包括里面的子組件。最終工具欄組件的結(jié)構(gòu)就是一個(gè)樹狀結(jié)構(gòu)，例似這樣的：
MenuBar
--MenuBar
----MenuBar
-----MenuBar
--Menubar
由于每個(gè)工具欄組件里面的每個(gè)Menubar均有自己的上下文，這樣當(dāng)子組件Menubar的click事件觸發(fā)時(shí)并不會(huì)調(diào)用到頂層app組件events里面定義的事件，而只是調(diào)用了父Menubar的events事件。
但是在使用體驗(yàn)上，很明顯，工具欄組件的點(diǎn)擊事件定義應(yīng)該是定義在app組件的events里面的才是合理。我們希望menubar:[]定義菜單項(xiàng)時(shí)，不管多少級(jí)嵌套，事件的觸發(fā)均可以冒泡到最上面的menubar的父上面。
因此，要實(shí)現(xiàn)該機(jī)制，目前是采用組件之間的通訊機(jī)制來實(shí)現(xiàn)的：
<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}}
<div class="ui mini {{item.labelColor }} label" v-if="item.label">
{{item.label}}
</div>
</a>
上面定義一個(gè)事件@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觸發(fā)時(shí)，我們根據(jù)傳入的subMenu來確認(rèn)點(diǎn)擊事件如何處理，如果Menubar是作為子菜單欄處理，則我們就直接向上冒泡事件，否則就在上層父組件觸發(fā)事件。
在menubar組件內(nèi)部調(diào)用時(shí)就傳入submenu=true,并且偵聽事件menuItemClick,menuItemClick事件代碼這樣：
events:{
menuItemClick:function(item,$event){
if(!this.subMenu){
this.$parent.$emit(item.click,item)
}else{
return true
}
}
},
小結(jié)一下:
在處理嵌套結(jié)構(gòu)的組件，如具有下拉菜單的工具欄、樹形組件等時(shí)，由于組件內(nèi)部均具有各自獨(dú)立的上下文，因此必須使用組件通訊機(jī)制來處理內(nèi)部組件間的通訊。
但如此處理方式，我覺得還是比較麻煩的，理想的方式，我覺得最好的官方可以為組件提供一個(gè)直接使用父組件上下文的機(jī)制，例如：
<MenuBar> <button scoped="false"></button> <button scoped="false"></button> </MenuBar>
這樣上面的button就沒有自己的上下文，而可以直接引入父組件的上下文，這樣模式應(yīng)該在很多場(chǎng)合均會(huì)使用到的。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了細(xì)說 Vue 組件的服務(wù)器端渲染，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
vue如何動(dòng)態(tài)設(shè)置背景漸變色
這篇文章主要介紹了vue如何動(dòng)態(tài)設(shè)置背景漸變色問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細(xì)介紹了如何基于Vue實(shí)現(xiàn)簡(jiǎn)單的消息提示功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
vue3緩存頁面keep-alive及路由統(tǒng)一處理詳解
當(dāng)我們不想每次跳轉(zhuǎn)路由都會(huì)重新加載頁面時(shí)（重新加載頁面很耗時(shí)）,就可以考慮使用keep-alive緩存頁面了,這篇文章主要給大家介紹了關(guān)于vue3緩存頁面keep-alive及路由統(tǒng)一處理的相關(guān)資料,需要的朋友可以參考下2021-10-10
Vue.js 帶下拉選項(xiàng)的輸入框(Textbox with Dropdown)組件
這篇文章主要介紹了Vue.js 帶下拉選項(xiàng)的輸入框(Textbox with Dropdown)組件,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了Vuex總體案例詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
vue使用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新詳解
最近在學(xué)習(xí)axios，然后項(xiàng)目就用到了，所以這篇文章主要給大家介紹了關(guān)于vue中利用axios實(shí)現(xiàn)文件上傳進(jìn)度的實(shí)時(shí)更新的相關(guān)資料，文中先對(duì)axios進(jìn)行了簡(jiǎn)單的介紹，方法大家理解學(xué)習(xí)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
Vue Autocomplete 自動(dòng)完成功能簡(jiǎn)單示例
這篇文章主要介紹了Vue Autocomplete 自動(dòng)完成功能,結(jié)合簡(jiǎn)單示例形式分析了Vue使用el-autocomplete組件實(shí)現(xiàn)自動(dòng)完成功能相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
vue中element 的upload組件發(fā)送請(qǐng)求給后端操作
這篇文章主要介紹了vue中element 的upload組件發(fā)送請(qǐng)求給后端操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
詳解Vue-axios 設(shè)置請(qǐng)求頭問題
這篇文章主要介紹了Vue-axios 設(shè)置請(qǐng)求頭問題,文中給大家提到了axios設(shè)置請(qǐng)求頭內(nèi)容的方法，需要的朋友可以參考下2018-12-12