supermall项目---tabbar的封装

通过跟coderwhy老师的学习，我觉得这个项目收获最多的是一种组件化的思想---万物皆可封装，万物皆可复用，一次编写，到处引入

首先划分下结构

maintabbar作为根组件，tabbar作为底部整体组件，并在里面设立一个插槽用于接收每一个tabbaritem构成的整体，tabbaritem作为每一个小tab，并在里面设立三个具名插槽，分别用于接收非激活状态图片，激活状态图片，和文字

<div class="tab-bar-item" @click="itemClick">

     <div v-show="!isActive"> <slot name="tab-img"></slot></div>

     <div v-show="isActive"> <slot name="tab-img-active"></slot></div>

     <div :style="activeStyle"> <slot name="tab-text"></slot></div>

  </div>

区分激活与否的关键就在于点击的对象是否与当前对象匹配，实现激活功能可以通过v-show。

其中最大的看点就在于这段代码

isActive(){     

      return this.$route.path.indexOf(this.path)!== -1

}

this.$route.path代表路由中的path

this.path我采用的是父组件传过来的props

你就想我点击的这个路由path，和我们这个页面对应的path相等，是不是就代表在同一事件上，也就代表此时是被激活的状态。

而我们使用的是indexOf也就是检索的意思，如果当前路由的path存在这个页面的path则为真！