vue3微信公众号商城项目实战系列（7）自定义底部tabbar组件

在开始之前，先看看官方对组件的定义：

 

vue3的生态非常丰富，有各种各样的开源组件库可以拿来就用，比如vant、element-ui等，本系列不使用任何第3方组件，

完全使用原生的语法来写，只为聚焦vue3技术本身，本篇写一个自定义tabbar组件，效果如下图所示：

该组件实现如下功能：

1. 底部tab项固定3个：首页、购物车、我的；

2. 购物车 tab 项加数字角标，显示购物车中商品的数量 ，如下图，当在首页添加商品时数量要同步更改。

3.点击tab项跳转相应页面。

4. 组件的使用尽可能简单，理论上页面引用的时候只要传递一个当前页面的名称就可以了，其他逻辑全部在组件内部完成。

明确了需求，下面从0开始构建一个tabbar组件。

第1步：新建文件和文件夹，如下图：

各文件说明如下：

1. TabBar.vue 是要实现的组件文件，放在 components 目录下，以和页面区分。

2. tabBarIcon 是存放组件使用的图标目录，名称中有数字1的表示选中的 tab 项对应的图标，为彩色，所有图标如下：

3. 为了处理简洁，我们用约定的方式来处理点击 tab 项时的页面跳转，如下：

Home.vue 是首页，Cart.vue是购物车页，Mine.vue 是我的页（页面是特殊的组件，也可称页面组件，放在 views 目录），

这3个文件都要引用 TabBar.vue 这个自定义组件，根据官方的建议（见下图），组件名称用 PascalCase 的标签名。

页面引用方式如下：

 

了解了基本用法，来看TabBar.vue 代码如下：

布局块代码：

<template>
    <div class="tab-bar">
        <template v-for="item in arrTab">
            <div :class="item.tabClass" @click="onClick(item.tabName)"> 
                <img class="tab-bar-item-img" :src="item.tabIcon" />
                <span>{{ item.tabText }}</span>
            </div> 
        </template> 
    </div>    
</template>

模板中使用 v-for 循环输出各 tab 项，数组 arrTab 是在脚本块定义的 ，动态取值的部分直接绑定对象值。

其中 HTML元素的属性绑定用 " : ", 内容绑定用 "{{ }}" ，方法用 "@" 绑定。

脚本块代码：

<script setup> 
import { reactive, onMounted } from 'vue';
 3 import {useRouter} from 'vue-router';
 4 const router = new useRouter();
 5 function onClick(routerName){
 6     router.push({name:routerName});
 7 }

const arrTab = reactive([
    {tabName:'home', tabClass:'tab-bar-item', tabText:'首页', tabIcon:'/src/components/tabBarIcon/home.png'},
    {tabName:'cart', tabClass:'tab-bar-item', tabText:'购物车', tabIcon:'/src/components/tabBarIcon/cart.png'},
    {tabName:'mine', tabClass:'tab-bar-item', tabText:'我的', tabIcon:'/src/components/tabBarIcon/mine.png'},
]);

15 const props = defineProps(['name']) 
16 onMounted(() => {
17     console.log(props.name);
18     arrTab.forEach((item,index)=>{
19         if(item.tabName===props.name){
20             item.tabClass="tab-bar-item1";
21             item.tabIcon=item.tabIcon.replace(".png","1.png");
22         }
23     });
24 })
</script>

这里使用组合式API书写脚本（有setup标记），各行作用如下：

第2行：导入vue中的函数，reactive 是获取响应式对象的，onMounted 是生命周期钩子函数，在页面加载完 DOM 对象后触发，

当点击 tab 项跳转页面时需要在这个钩子函数中将选中的项置为选中的状态，见第 16~24 行的代码。

 

第3-7行：导入路由对象，当用户点 tab 项时做页面跳转。

 

第9-13行：定义响应式数组对象，一个对象只要用 reactive( ) 函数处理一下就可以做双向数据绑定，这就是响应式编程的优势之一。

布局块中的 tab 项的内容就是用这个数据对象输出的。

 

第15行：用编译宏命令defineProps( ) 给这个组件定义一个 name 属性，这样引用的页面就可以在这个组件上给name属性赋值

，props 对象就可以取到这个值，第19 行的 if 语句就是基于 这个属性值来决定哪个 tab 项用彩色图片和文字来显示的。

 

样式块代码：

<style>
.tab-bar{
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 2px 0;
    border-top: solid 1px #c0c0c0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;

}
.tab-bar-item{
    display: flex;
    flex-direction: column;
}
.tab-bar-item1{
    display: flex;
    flex-direction: column;
    color: #0ab2ac;
}
.tab-bar-item-img{
    width: 28px;
    height: 28px;
}
</style>

样式中 .tab-bar 要将 tabbar 绝对定位在页面底部 , 通过 "position: fixed;  left: 0; bottom: 0;" 来实现，

显示类型 为 "display: flex; "  可以很方便的给3个 tab 项 横向均匀对齐。其他的就是 css 的基本用法了。

 

 

最后，看一个 Home.vue 、 Cart.vue、Mine.vue 中的代码：

Home.vue 代码：

<template>
    <div>
        <span>公众号商城首页</span> 
        <TabBar name="home" />
    </div>    
</template>


<script setup>
import TabBar from '@/components/TabBar.vue';
 
</script>

 Cart.vue 代码：

<template>
    <div>
        <span>购物车</span> 
        <TabBar name="cart" />
    </div>    
</template>


<script setup>
import TabBar from '@/components/TabBar.vue';
 
</script>

Mine.vue 代码：

<template>
    <div>
        <span>我的</span> 
        <TabBar name="mine" />
    </div>    
</template>


<script setup>
import TabBar from '@/components/TabBar.vue';
 
</script>

这3个文件中  <TabBar name="xxxx" /> 的 name 属性就是对应  const props = defineProps(['name']) 这里的 name 字符串

，defineProps 是一个仅 <script setup> 中可用的编译宏命令，并不需要显式地导入，其传入的参数是一个字符数组

， 如果有多个属性，加到这个数组当中就可以了，形如：const props = defineProps(['name', 'title', 'text'])

，取值的时候用 props.name、props.title、props.text 就可以获取到引用页面设置的属性值了 。

 

 

 

以上就是一个简单的自定义组件的用法，这里还有一个功能 " 购物车加数字角标 " 没有实现

，留着写加购物车功能的时候再完成更合适一些。