渐渐,了解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!这是第一篇博客,我的一小步仍是我的一小步。
时间: 2024-11-10 01:31:04