时间:2021-05-18
本文介绍了Vue树形组件的示例代码,分享给大家,具体如下:
使用SemanticUI和vue做一个menubar组件,实现方法大概是这样的:
使用时,假如父组件app使用到了menubar组件,那么data中需要定义一下items数据,例 :
里面的click事件是定义了,当在工具栏中单击时的事件,理想的情况应该是事件定义在父组件app的events里面,像这样:
工具栏组件是根据传入的items来生成的,包括里面的子组件。最终工具栏组件的结构就是一个树状结构,例似这样的:
MenuBar
--MenuBar
----MenuBar
-----MenuBar
--Menubar
由于每个工具栏组件里面的每个Menubar均有自己的上下文,这样当子组件Menubar的click事件触发时并不会调用到顶层app组件events里面定义的事件,而只是调用了父Menubar的events事件。
但是在使用体验上,很明显,工具栏组件的点击事件定义应该是定义在app组件的events里面的才是合理。我们希望menubar:[]定义菜单项时,不管多少级嵌套,事件的触发均可以冒泡到最上面的menubar的父上面。
因此,要实现该机制,目前是采用组件之间的通讯机制来实现的:
上面定义一个事件@click="onMenuItemClick(item,$event)"
在onMenuItemClick触发时,我们根据传入的subMenu来确认点击事件如何处理,如果Menubar是作为子菜单栏处理,则我们就直接向上冒泡事件,否则就在上层父组件触发事件。
复制代码 代码如下:<menubar @menuItemClick="onMenuItemClick" :items="rightItems" sub-menu="true" v-if="rightItems.length > 0"></menubar>
在menubar组件内部调用时就传入submenu=true,并且侦听事件menuItemClick,menuItemClick事件代码这样:
小结一下:
在处理嵌套结构的组件,如具有下拉菜单的工具栏、树形组件等时,由于组件内部均具有各自独立的上下文,因此必须使用组件通讯机制来处理内部组件间的通讯。
但如此处理方式,我觉得还是比较麻烦的,理想的方式,我觉得最好的官方可以为组件提供一个直接使用父组件上下文的机制,例如:
这样上面的button就没有自己的上下文,而可以直接引入父组件的上下文,这样模式应该在很多场合均会使用到的。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文介绍了vue父子组件的嵌套的示例代码,分享给大家,具体如下:组件的注册:先创建一个构造器varmyComponent=Vue.extend({templat
本文实例讲述了vue实现的树形结构加多选框。分享给大家供大家参考,具体如下:前面说了如何用递归组件来写vue树形结构,写了树形结构还要在前面加多选框,然后往数组
1、示例代码采用vue单文件组件,使用moment插件格式化日期{{date|dateFormat}}importmomentfrom'moment';impo
本文实例为大家分享了Vue实现无缝轮播效果的具体代码,供大家参考,具体内容如下代码1.子组件代码代码如下(示例):<>script代码如下(示例):exp
本文介绍了vue-image-crop基于Vue的移动端图片裁剪组件示例,分享给大家,具体如下:代码地址:https://github.com/jczzq/vu