但是在使用体验上，很明显，工具栏组件的点击事件定义应该是定义在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>
这样上面的button就没有自己的上下文，而可以直接引入父组件的上下文，这样模式应该在很多场合均会使用到的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。