Vue中怎么實現一個樹形組件-創(chuàng)新互聯(lián)
Vue中怎么實現一個樹形組件，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
沾化ssl適用于網站、小程序/APP、API接口等需要進行數據傳輸應用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書合作）期待與您的合作！
具體如下：
使用SemanticUI和vue做一個menubar組件，實現方法大概是這樣的：
{{item.text}}
{{item.label}}
//如果有有children則說明是下拉菜單項，然后遞歸調用自身
0">
{{item.text}}
//顯示在右側的菜單項，也是遞歸調用自身
0">
使用時，假如父組件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事件觸發(fā)時并不會調用到頂層app組件events里面定義的事件，而只是調用了父Menubar的events事件。
但是在使用體驗上，很明顯，工具欄組件的點擊事件定義應該是定義在app組件的events里面的才是合理。我們希望menubar:[]定義菜單項時，不管多少級嵌套，事件的觸發(fā)均可以冒泡到最上面的menubar的父上面。
因此，要實現該機制，目前是采用組件之間的通訊機制來實現的：
{{item.text}}
{{item.label}}
上面定義一個事件@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ā)時，我們根據傳入的subMenu來確認點擊事件如何處理，如果Menubar是作為子菜單欄處理，則我們就直接向上冒泡事件，否則就在上層父組件觸發(fā)事件。
復制代碼 代碼如下:
在menubar組件內部調用時就傳入submenu=true,并且偵聽事件menuItemClick,menuItemClick事件代碼這樣：
events:{
menuItemClick:function(item,$event){
if(!this.subMenu){
this.$parent.$emit(item.click,item)
}else{
return true
}
}
},小結一下:
在處理嵌套結構的組件，如具有下拉菜單的工具欄、樹形組件等時，由于組件內部均具有各自獨立的上下文，因此必須使用組件通訊機制來處理內部組件間的通訊。
但如此處理方式，我覺得還是比較麻煩的，理想的方式，我覺得最好的官方可以為組件提供一個直接使用父組件上下文的機制，例如：
這樣上面的button就沒有自己的上下文，而可以直接引入父組件的上下文，這樣模式應該在很多場合均會使用到的。
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注創(chuàng)新互聯(lián)成都網站設計公司行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)成都網站設計公司的支持。
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、網站設計器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
當前標題：Vue中怎么實現一個樹形組件-創(chuàng)新互聯(lián)
地址分享：http://weahome.cn/article/dohcji.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司
