开发Vue树形组件的示例代码

由于每个工具栏组件里面的每个Menubar均有自己的上下文，这样当子组件Menubar的click事件触发时并不会调用到顶层app组件events里面定义的事件，而只是调用了父Menubar的events事件。

但是在使用体验上，很明显，工具栏组件的点击事件定义应该是定义在app组件的events里面的才是合理。我们希望menubar:[]定义菜单项时，不管多少级嵌套，事件的触发均可以冒泡到最上面的menubar的父上面。
因此，要实现该机制，目前是采用组件之间的通讯机制来实现的：

<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> 

上面定义一个事件@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  @menuItemClick=”onMenuItemClick” :items=”rightItems” sub-menu=”true” v-if=”rightItems.length > 0″></menubar>

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

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>