vue递归组件实战之简单树形控件实例代码

1、递归组件-简单树形控件预览及问题

在编写树形组件时遇到的问题：

组件如何才能递归调用？递归组件点击事件如何传递？2、树形控件基本结构及样式

模板ul class=' vue-tree ' Li class=' tree-item ' div class=' tree-content '！-节点内容- div class='expand-arrow'/div！-展开或收缩节点按钮- div类='树标签'小学/div！-节点文本内容- /div ul class='子树！-子节点-Li class=' tree-item expand ' div class=' tree-content ' div class=' expand-arrow '/div class=' tree-label '语文/div/div/Li Li class=' tree-item ' div class=' tree-content ' div class=' expand-arrow '/div div class=' tree-label '数学/div/div/Li/ul/Li/ul/模板样式lang='手写笔。vue-tree { list-style : none；padd : 0；保证金： 0；树项目cursor:指针；过渡：背景色。2s；树内容{位置：相对；左填充left: 28px:悬停{底色： # f0f 7 ff} } .展开箭头{位置：绝对值；top : 0；左： 0；宽度： 28px高度： 28px光标：指针；{ position : absolute top : 50%；左侧： 50%;显示器：块；内容： " "；边框宽度： 5px边框样式：实心；边框-颜色：透明；边框-左侧-颜色： # CCC余量：-5px 0 0-2.5px；过渡：所有。2s；} } .展开{。树内容{底色： # f0f 7ff。{ transform:旋转(90度)后展开箭头{ : };余量：-2.5px 0-5px；} } } } .树标签{ height: 28px线高： 28pxfont-size : 14px} .子树{ display : none list-style :无；padding: 0 0 0 28pxmargin : 0} .扩展。子树{显示： }块；} .没有孩子。树内容{。展开-箭头{ display : none } } } } }/style 3 ,}组件目录及数据结构

目录结构

某视频剪辑软件树

VueTree.vueTreeItem.vue

树形控件数据结构

让treeData=[ { text: '一级', //显示的文字expand: false，//默认是否展开儿童： [ //子节点{ text : }一级-1 '，expand: false，}，{ text: '一级-2 '，expand: false，children: [ { text: '一级-2-1 '，expand: false，}，{ text: '一级-2-2 '，expand: false，}]}]}]；3.1、TreeItem.vue代码

模板Li class=' tree-item ' : class=' { expandd : isExpand，' no-child':treeitemdata。children | | treeitemdata。孩子们。length===0 } ' div class=' tree-content ' @ click=' _ click event ' div class=' expand-arrow ' @ click。stop=' expandTree()'/div class=' tree-label“{ tree item data。text } }/div/div ul class=' sub tree ' v-if=' tree item data。子树项目数据。孩子们。长度为0！- TreeItem组件中调用节点组件-TreeItem v-for=' TreeItem '数据。children ' : TreeItem-data=' item ' : key=' uuid()' : tree-click-event=' TreeClick event '/TreeItem/ul/Li/模板脚本导出默认{ name: 'TreeItem '，prop : { TreeItem数据： { type : Object，default(){ return }；} }, //节点点击事件treekclickevent : { type : Function，default(){ return Function(){ }；} } }，data(){ return { //节点是否展开isexpand :这个。treeitemdata。expand | | false } }，methods: { //展开/收缩expandTree(标志){ if(！这个。treeitemdata。孩子| |这个。treeitemdata。孩子们。length===0){ return；} if(flag===' undefined '){ flag=！this.isExpand}else{ flag=！旗帜；} this.isExpand=flag}，//创建一个唯一id uuid(){ let str=Math.random().toString(32)；str=str。substr(2)；返回字符串；}, //节点点击事件_clickEvent(){ //如果有传递事件函数，则调用事件函数并传递当前节点数据及组件如果(这个。此类型的TreeClickEvent。TreeClickEvent==' function '){ this。TreeClickEvent(这。TreeItem数据，这个)；} } } }/script3.1.1、解决组件如何才能递归调用？问题

在组件模板内调用自身必须明确定义组件的名字属性，并且递归调用时组件名称就是名字属性。如在TreeItem.vue组件中组件的名字名称为' TreeItem '，那么在模板中调用时组件名称就必须是TreeItem。

当然也可以全局注册组件，具体可以查看某视频剪辑软件官方文档递归组件

3.1.2、解决递归组件点击事件如何传递？问题

我这里的解决方案是使用小道具将事件函数传递进来，在点击节点的时候调用事件函数，并把相应的数据传递进去。

之前也尝试过使用$emit的形式并把数据传递过去，由于是递归组件，这样一直$emit，到最外层时传递的数据就变了，比如传递是第3层节点的数据，到最后执行时数据就变成第一层节点的数据了

4、VueTree.vue组件

模板保险商实验所类=' vue-tree ' tree item v-for=' tree data ' : key=' index ' : tree item data=' item ' : tree-click-event=' tree click event '/tree item/ul/模板脚本从导入树项目./TreeItem '；导出默认{ name: 'VueTreeMenu '，components: { TreeItem }，prop : {//树形控件数据treeData: { type: Array，default(){ return[]；} }, //节点点击事件treekclickevent : { type : Function，default(){ return Function(){ }；} } } }/scriptstyle lang='手写笔。vue-tree { list-style : none；padd : 0；保证金： 0；树项目cursor:指针；过渡：背景色。2s；树内容{位置：相对；左填充left: 28px:悬停{底色： # f0f 7 ff} } .展开箭头{位置：绝对值；top : 0；左： 0；宽度： 28px高度： 28px光标：指针；{ position : absolute top : 50%；左侧： 50%;显示器：块；内容： " "；边框宽度： 5px边框样式：实心；边框-颜色：透明；边框-左侧-颜色： # CCC余量：-5px 0 0-2.5px；过渡：所有。2s；} } .展开{。树内容{底色： # f0f 7ff。{ transform:旋转(90度)后展开箭头{ : };余量：-2.5px 0-5px；} } } } .树标签{ height: 28px线高： 28pxfont-size : 14px} .子树{ display : none list-style :无；padding: 0 0 0 28pxmargin : 0} .扩展。子树{显示： }块；} .没有孩子。树内容{/*填充-左： 0；*/.展开-箭头{ display: none} } } } }/style 5，}使用树形组件

模板div class=' app ' id=' app ' VueTree : tree-data=' tree data 2 ' : tree-click-event=' tree click event '/VueTree/div/templatescriptionvuetree from ' ./components/vue-tree/VueTree '；导出默认{ name: 'app '，data(){ return { treedata 2: [{ text : }一级', //显示的文字expand: false，//默认是否展开儿童：[{ text : }二级-1 '，expand: false，}，{ text: '二级-2 '，expand: false，children: [ { text: '三级-1 '，expand: false，}，{ text: '三级-2 '，expand: false，children: [ { text: '四级-1 '，expand: false，} ] } ] } ] }，{ text: '一级-2 '，expand: false } ] })，方法： { TreeClickEvent(item，TreeItem){ console。日志(项目)；} }，组件3360 { VueTree } }/脚本总结

以上所述是小编给大家介绍的某视频剪辑软件递归组件实战之简单树形控件实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！