通過跟coderwhy老師的學習，我覺得這個項目收獲最多的是一種組件化的思想---萬物皆可封裝，萬物皆可復用，一次編寫，到處引入

首先劃分下結(jié)構(gòu)

maintabbar作為根組件，tabbar作為底部整體組件，并在里面設(shè)立一個插槽用于接收每一個tabbaritem構(gòu)成的整體，tabbaritem作為每一個小tab，并在里面設(shè)立三個具名插槽，分別用于接收非激活狀態(tài)圖片，激活狀態(tài)圖片，和文字

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

區(qū)分激活與否的關(guān)鍵就在于點擊的對象是否與當前對象匹配，實現(xiàn)激活功能可以通過v-show。

其中最大的看點就在于這段代碼

isActive(){? ? ?

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

}

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

this.path我采用的是父組件傳過來的props

你就想我點擊的這個路由path，和我們這個頁面對應(yīng)的path相等，是不是就代表在同一事件上，也就代表此時是被激活的狀態(tài)。

而我們使用的是indexOf也就是檢索的意思，如果當前路由的path存在這個頁面的path則為真！