平武建站

Vue中怎么实现一个树形组件-创新互联

Vue中怎么实现一个树形组件，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

沾化ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

具体如下：

使用SemanticUI和vue做一个menubar组件，实现方法大概是这样的：

 
    
  //显示在右侧的菜单项，也是递归调用自身 
    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事件触发时并不会调用到顶层app组件events里面定义的事件，而只是调用了父Menubar的events事件。

但是在使用体验上，很明显，工具栏组件的点击事件定义应该是定义在app组件的events里面的才是合理。我们希望menubar:[]定义菜单项时，不管多少级嵌套，事件的触发均可以冒泡到最上面的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触发时，我们根据传入的subMenu来确认点击事件如何处理，如果Menubar是作为子菜单栏处理，则我们就直接向上冒泡事件，否则就在上层父组件触发事件。

复制代码 代码如下:

在menubar组件内部调用时就传入submenu=true,并且侦听事件menuItemClick,menuItemClick事件代码这样：

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

小结一下:

在处理嵌套结构的组件，如具有下拉菜单的工具栏、树形组件等时，由于组件内部均具有各自独立的上下文，因此必须使用组件通讯机制来处理内部组件间的通讯。

但如此处理方式，我觉得还是比较麻烦的，理想的方式，我觉得最好的官方可以为组件提供一个直接使用父组件上下文的机制，例如：

 
  
 

这样上面的button就没有自己的上下文，而可以直接引入父组件的上下文，这样模式应该在很多场合均会使用到的。

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注创新互联成都网站设计公司行业资讯频道，感谢您对创新互联成都网站设计公司的支持。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、网站设计器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


文章名称：Vue中怎么实现一个树形组件-创新互联
本文路径：http://pwwzsj.com/article/dohcji.html

其他资讯