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

漸漸，了解Vue也有一個月了，最近遇上個無限級目錄樹的小功能，為了能多學習避免自己操作dom或是網上下插件，下決心用Vue來解決當下問題，畢竟毛爺爺講過，實踐出真知，本次主要運用了組件之間的相互循環引用，然后就是循環組件與父組件之間的通信，

源數據格式采用了毗鄰結構轉為多維數組的形式，沒辦法，我也暫且只能想到這樣去做，學習革命任重道遠.......

    Vue.component('item',{
        template:'<ul>\
                    <li v-for="child in model">\
                        <item-child v-if="child.children" :folder="child"  @transid="getid(arguments[0])"/>\
                        <p v-else @click="getid(child.id)">{{ child.name }}</p>\
                      </li>\
                  </ul>',
        props:{ model: Object },
        methods:{
            getid:function(id){
                this.$emit('transid',id);
            },
        }
    })
    Vue.component('item-child',{
        template:'<div>\
                  <p @click="toggle(folder.children)" @click="getid(folder.id)">{{ folder.name }}<a v-if="folder.children">{{ open ? pack : lanch}}</a></p>\
                  <item v-if="folder.children" :model="folder.children" v-show="open" @transid="getid(arguments[0])"/>\
                </div>',
        props:{ folder: Object },
        methods:{
             toggle:function(status){
                if(status){ this.open = !this.open; }
            },
            getid:function(id){
                this.$emit('transid',id); 
            }
          },
        data:function(){
            return {
                open:false,
                lanch:' [+]',
                pack:' [-]',
            }
        },
    })

這里只貼出了組件部分代碼，最終效果展示：

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