vue当中设计Tabbar插件时的思考

之前做移动端的项目一般会选用Mint-ui或者是Vux框架，不得不说这两款都是非常棒非常好用的UI框架，能给开发工作节省很多时间。

在Mint-ui里关于tabbar的使用，有如下的Demo：

  
    
    订单
  

使用了以后就想...为什么一定要对每个mt-tab-item指定一个id呢？对于tabbar来说，我并不需要关心我按下的对象id是多少，而需要关心的是按下哪个tabbar-item即可。
引申出来这么个问题：

1. 那么在父组件中如何区分按下的是哪个子组件呢？

通过判断children的_uid可以区分出究竟是哪个子组件

2. 子组件如何将自身的_uid抛给父组件呢？

调用$parent.$emit('input', _uid)，直接这样调用，会修改v-model绑定value值。

v-model="selected" 可以看成是 v-bind:value="selected" v-on:input="selected = $event.target.value" 的语法糖

有了这几步分析，然后自己写了一份简单的tabbar组件

tabbar.vue

tabbarItem.vue

这样写完以后，使用的时候会比mint-ui的组件更简化，可以取消对id的绑定依赖：

  
    
    {{ item.title }}
  

虽然到这一步改造是完成了，但是却总觉得有些问题。
那么在子组件里面调用父组件的methods是否合适？
但是后来想想tabbar-item仅仅是为tabbar服务的，所以不需要关心太过于耦合，考虑复用性等问题。
如思考的不到位请各位大神能给予一些指导意见。

Github: github.com/lyh2668
AuthBy: lyh2668