vue.js学习之递归组件

递归组件

组件在它的模板内可以递归地调用自己，只有当它有名字选项时才可以。在官网这句话就是关键定义组件是一定要有名字属性。按照这个思路我们开动吧。

实现最终效果图：

模拟数据格式如下：

var data=[{ 'id': '1 '，' data': { 'menuName': '项目管理，' menuCode': ' '，}，' ChildTreeNode ' :[{ ' data ' : { ' Menume ' : '项目，' menuCode': 'BusProject '，}，' childTreeNode': [] }，{ ' data ' : { ' menuName ' : '我的任务，' menuCode': 'BusProject '，}，' childTreeNode': [] }，{ ' data ' : { ' menuName ' : '人员周报，' menuCode': 'BusProject '，}，' ChildTreeNode ' :[]} }，{ 'id': '2 '，' data ' : { ' menuName ' : '数据统计，' menuCode': 'BusClock '，}，' childTreeNode': [] }，{ 'id': '3 '，' data ' : { ' menuName ' : '人事管理，' menuCode': ' '，}，' childTreeNode': [] }，{ 'id': '4 '，' data ' : { ' menuName ' : '基础管理，' menuCode': ' '，}，' childTreeNode': [] }]html我们思路按照保险商实验所里面套李，无限保险商实验所套李，标题用差异元素包裹，

Li div @ click=' toggle ' I v-if=' IsFolder ' class=' fa ' : class='[open？fa-folder-open ' : ' fa-folder ']'/I！-是一个文件夹判断是否存在子级改变图标-我v-if='！is folder ' class=' fa fa-file-text '/I { { model。数据。menuname } }/div ul v-show=' open ' v-if=' IsFolder ' items v-for=' cel in model。childtreenode ' :型号=' cel '/items/ul/Li官方文档里面写的递归组件强调了使用名字属性

导出默认{ name: 'items '，prop :[' model ']，components: { }，}按照某视频剪辑软件的思想，不操作师树，我们定义两个变量，一个显示隐藏子菜单（打开),一个存不存子菜单修改图标(isFolder)。

data() { return { open: false，isFolder: true }}利用某视频剪辑软件计算属性动态改变isFolder的值，修改图标，判断存在不子级和子级长度

computed : { IsFolder(){返回此。模特。childtreenode这个。模特。childtreenode。长度} }显示隐藏事件

方法： { toggle : function(){ if(this。这是。open=！this.open }}}写到这里我们已经做完一个树形菜单了如下，最终样式就留给大家自己去实现了我在贴出完整代码供大家参考。

模板Li div @ click=' toggle ' I v-if=' IsFolder ' class=' fa ' : class='[open？fa-folder-open ' : ' fa-folder ']'/I！-是一个文件夹判断是否存在子级改变图标-我v-if='！is folder ' class=' fa fa-file-text '/I { { model。数据。menuname } }/div ul v-show=' open ' v-if=' IsFolder ' items v-for=' cel in model。childtreenode ' : model=' cel '/items/ul/Li/template脚本类型=' text/JavaScript '导出默认{ name : ' items '，prop 3360[' model ']，components: { }，data(){ return { itemsthis.open } }，} }/脚本公司最开始是使用easyui做的管理系统，我接手后用某视频剪辑软件完整模仿了一些easyui的东西，下面就是在树形菜单基础上模仿出了树形表格，下图为完整图

总结

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助。如果你有任何问题，可以留言交流