|
今天有用到ly-tab，写一点注解。
ly-tab，一共就三个vue文件。主文件：index.vue，引入了2个子组件，tabbar,tabbar-item，
当自己在引入这个组件时候，比如我在Home.vue引入了ly-tab，文件结构：
| |----home.vue # 自己的文件
| | |---index.vue # ly-tab的主文件
| | | |--tabbar.vue # ly-tab的tab列表框，
| | | | ---tabbar-item.vue # ly-tab的具体的item
从最小的tabbar-item.vue开始看：
每一个item都是一个a标签，且绑定了一个ly-tab-item的class。
动态绑定了一个style,通过id（这个id在tabbar-item.vue的data属性里面）（表征了我们当前点的哪个item）来判断是否添加activeStyle的css属性（其实是一个color）这个color属性来自于父组件（index.vue）的activeColor属性。
但是我们在index.vue里面是找不到这个activeColor属性的，所以说这个是我们自己，在Home.vue里面定义的，通过传值option对象。下图是index.vue里面的props，定义了来自父组件，即Home.vue的数据类型。
继续看，点击触发onItemClicked事件。
这个事件是让其父组件，发送信息给input事件，信息内容是this.id,我们来看一下这个emit,到底发给了谁，其实是发给了,home.vue。下图是我的home.vue。对比一下
当前的tabbar-item里的id===》由index.vue去emit===》给到了home.vue里的input事件，其实就是v-model，看一个v-model的原理怎么实现的就明白了，进而改变了home.vue里面的selectedId,进而对应获取不同的items.
然后就是2个插槽，一个具名插槽，一个匿名插槽。在index.vue中定义。第3点关于slot的链接
index.vue:
这2个span,就是item.vue里面预先留的slot的位置应该填入的元素。ly-tab-item这个里面由2个span,第1个就是具名插槽，擦在item.vue里的对应的slot里，如有由item.icon，就会把图标加上。而在外面tabbar.vue又包裹了一层，所以就是：
2个span==》擦到item.vue的插槽里==》带有2个span的item.vue作为整体被遍历，与在home.vue传入的items有关==》很多个item.vue又作为一个整体插入到tabbar.vue的slot里面。。。。
我觉得整体组件的业务逻辑应该就差不多了。再写一遍就是：
点击item会触发item.vue的emit,传给Home做出改变
tabber.vue
这个主要实现的是拖拽的动画效果，能力有限，怎么如此动画的我也分析不出来。。
| 
转播
