漸漸，了解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!這是第一篇博客，我的一小步仍是我的一小步。

Vue組件之無限級目錄樹構建