1 组件拆分

TabBar 是底部的一个通用组件. 在 TabBar 中可以放入任意多个 item.因此可以拆分成两个组件

• TabBar
• TabBarItem

2 TabBar 初步分析

我们希望将 TabBar 做成一个通用的组件,

最容易想到的是: TabBar 里的 Item 是可以变化的, 因此, 可以在 TabBar 里放置一个slot

3 封装

在components目录下创建tabbar目录, 在创建TabBar.vue文件

<template>
  <div class="bj-tab-bar">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'TabBar',
}
</script>

<style scoped>
.bj-tab-bar {
  display: flex;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  background-color: #f2f2f2;
  box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.1);
}
</style>

• 为了提高通用性. 可以在类名的前面加上一个特殊的前缀, 比如: bj
• 也可以考虑给组件加上前缀.

4 引用组件

在App.vue中引用组件, 并测试

<template>
  <div id="app">
    <tab-bar>
      <div class="tab-bar-item">首页</div>
      <div class="tab-bar-item">分类</div>
      <div class="tab-bar-item">发现</div>
      <div class="tab-bar-item">购物车</div>
      <div class="tab-bar-item">我的</div>
    </tab-bar>
  </div>
</template>

<script>
import TabBar from '@/components/tabbar/TabBar'

export default {
  name: 'App',
  components: {
    TabBar,
  },
}
</script>

<style scoped>
.tab-bar-item {
  flex: 1;
  text-align: center;
}
</style>

#