Vue组件之无限级目录树构建

Posted 2020-10-02

渐渐，了解Vue也有一个月了，最近遇上个无限级目录树的小功能，为了能多学习避免自己操作dom或是网上下插件，下决心用Vue来解决当下问题，毕竟毛爷爷讲过，实践出真知，本次主要运用了组件之间的相互循环引用，然后就是循环组件与父组件之间的通信，

源数据格式采用了毗邻结构转为多维数组的形式，没办法，我也暂且只能想到这样去做，学习革命任重道远.......

 1     Vue.component(‘item‘,{
 2         template:‘<ul> 3                     <li v-for="child in model"> 4                         <item-child v-if="child.children" :folder="child"  @transid="getid(arguments[0])"/> 5                         <p v-else @click="getid(child.id)">{{ child.name }}</p> 6                       </li> 7                   </ul>‘,
 8         props:{ model: Object },
 9         methods:{
10             getid:function(id){
11                 this.$emit(‘transid‘,id);
12             },
13         }
14     })
15     Vue.component(‘item-child‘,{
16         template:‘<div>17                   <p @click="toggle(folder.children)" @click="getid(folder.id)">{{ folder.name }}<a v-if="folder.children">{{ open ? pack : lanch}}</a></p>18                   <item v-if="folder.children" :model="folder.children" v-show="open" @transid="getid(arguments[0])"/>19                 </div>‘,
20         props:{ folder: Object },
21         methods:{
22              toggle:function(status){
23                 if(status){ this.open = !this.open; }
24             },
25             getid:function(id){
26                 this.$emit(‘transid‘,id); 
27             }
28           },
29         data:function(){
30             return {
31                 open:false,
32                 lanch:‘ [+]‘,
33                 pack:‘ [-]‘,
34             }
35         },
36     })

这里只贴出了组件部分代码，最终效果展示：

now!这是第一篇博客，我的一小步仍是我的一小步。