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     })