# 移動端底部菜單欄
:-: 
## 傳統結構和樣式
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05底部菜單欄</title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_1226299_mntzsrlgg2e.css">
<style>
* {margin: 0;padding: 0;list-style: none;border: none;}
body {background: #ccc;}
.footer-tabbar {position: absolute;left: 0;bottom: 0;width: 100%;height: 44px;background: #fff;font-size: 14px;}
.footer-tabbar ul{ height: 100%; display: flex; justify-content: center; align-items: center;}
.footer-tabbar ul li{width: 20%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;text-align: center;}
.footer-tabbar ul li a{color: #333; text-decoration: none;}
.footer-tabbar .iconfont{ font-size:18px; vertical-align: middle;}
</style>
</head>
<body>
<div id="app">
<footer class="footer-tabbar">
<ul>
<li><a href="#"><i class="iconfont icon-shouye1"></i><p>首頁</p></a></li>
<li><a href="#"><i class="iconfont icon-huanyuan"></i><p>專題</p></a></a></li>
<li><a href="#"><i class="iconfont icon-category"></i><p>分類</p></a></a></li>
<li><a href="#"><i class="iconfont icon-gouwuche"></i><p>購物車</p></a></a></li>
<li><a href="#"><i class="iconfont icon-wode"></i><p>我的</p></a></a></li>
</ul>
</footer>
</div>
</body>
</html>
```
**效果**
:-: \*\*\*\*
## 拆分成組件
> 底欄實現，會將它分成一個整體做成組件，里面的每一項又如何管理？我們肯定將里面的每一項做成一個組件。
## 無插槽寫法
```
<div id="app">
<tab-bar></tab-bar>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('tab-bar-item', {
template: `
<li><a href="#"><i class="iconfont icon-shouye1"></i><p>首頁</p></a></li>
`
})
Vue.component('tab-bar', {
template: `<footer class="footer-tabbar">
<ul>
<tab-bar-item></tab-bar-item>
</ul>
</footer>`
})
var vm = new Vue({
el: '#app',
data: {}
})
</script>
```
>[success] 我們可以發現，`tab-bar-item`組件里面的數據是死的。是不好的，可以讓父組件通過屬性傳遞來實現。
> 而且底欄的效果，可以將它們放在一個數組中存放。放在實例的data中。
### 數據
```
tabbar: [
{"id": 1, "icon": "icon-shouye1", "name": "首頁", "url": "/"},
{"id": 2,"icon": "icon-huanyuan","name": "專題","url": "/topic"},
{"id": 3,"icon": "icon-category","name": "分類","url": "/category"},
{"id": 4,"icon": "icon-gouwuche","name": "購物車","url": "/cart"},
{"id": 5,"icon": "icon-wode","name": "我的","url": "/user"}
]
```
```
<div id="app">
<tab-bar :tabbar="tabbar"></tab-bar>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('tab-bar-item', {
props:['item'],
template: `
<li>
<a :href="item.url">
<i class="iconfont" :class="item.icon"></i>
<p>{{item.name}}</p>
</a>
</li>
`
})
Vue.component('tab-bar', {
props:['tabbar'],
template: `
<footer class="footer-tabbar">
<ul>
<tab-bar-item v-for="(item,index) in tabbar" :item="item"></tab-bar-item>
</ul>
</footer>`
})
var vm = new Vue({
el: '#app',
data: {
tabbar: [
{"id": 1, "icon": "icon-shouye1", "name": "首頁", "url": "/"},
{"id": 2,"icon": "icon-huanyuan","name": "專題","url": "/topic"},
{"id": 3,"icon": "icon-category","name": "分類","url": "/category"},
{"id": 4,"icon": "icon-gouwuche","name": "購物車","url": "/cart"},
{"id": 5,"icon": "icon-wode","name": "我的","url": "/user"}
]
}
})
</script>
```
>[warning] 上面的組件看似沒有問題，但是再回過頭仔細查看，實例組件的數據，往`tab-bar-item`組件傳遞。要先傳到`tab-bar` 才能傳遞下去。我們也可以看看有插槽的寫法(編譯作用域)
## 有插槽寫法
> 在`tab-bar`組件上添加插槽。將 `tab-bar-item` 組件作為`tab-bar` 組件的內容傳遞到定義的插槽中。
```
<div id="app">
<tab-bar>
<tab-bar-item v-for="(item,index) in tabbar" :item="item" :key="item.id"></tab-bar-item>
</tab-bar>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('tab-bar-item', {
props: ['item'],
template: `
<li>
<a :href="item.url">
<i class="iconfont" :class="item.icon"></i>
<p>{{item.name}}</p>
</a>
</li>
`
})
Vue.component('tab-bar', {
template: `<footer class="footer-tabbar">
<ul>
<slot></slot>
</ul>
</footer>`
})
var vm = new Vue({
el: '#app',
data: {
tabbar: [
{"id": 1, "icon": "icon-shouye1", "name": "首頁", "url": "/"},
{"id": 2, "icon": "icon-huanyuan", "name": "專題", "url": "/topic"},
{"id": 3, "icon": "icon-category", "name": "分類", "url": "/category"},
{"id": 4, "icon": "icon-gouwuche", "name": "購物車", "url": "/cart"},
{"id": 5, "icon": "icon-wode", "name": "我的", "url": "/user"}
]
}
})
</script>
```
>[success] 這樣寫的好處，利用編譯作用域，將數據直接傳遞給了 `tab-bar-item` 組件，而不再經歷 `tab-bar` 作中轉了。
>[danger] 總結：
> 很多同學在初學組件時，會經歷的階段是：認為這種定義組件形式是最好的！要摒棄掉這個想法。
> 不同的組件用法只有放在不同的場景下它才更能發揮出它的作用。我們也可以看一面的一個案例無疑焦點圖。
