1.背景
日常开发中,有时候有些组件是功能类似甚至完全相同的情况,这个时候我们完全没必要再重新写一个,
可以抽离复用可以减少大量的时间,案例:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9925e76e4d0ede8d8bf4fce4fa418b70.jpeg#pic_center)
像一些App底部的标签页,在进行一些标签的跳转时,底部的只是变化选中时的字体颜色和图标,
大部分的元素都相同。
2.抽离思路
2.1先抽出一个大的可以装里面小组件的大容器TabBar
<div class='tabBar'>
<tab-bar-item v-for="(val,index) in navBar" :path='val.path' fontColor='#009E97'>
<template v-slot:icon-active>
<img :src="val.activeImg">
</template>
<template v-slot:icon-inactive>
<img :src="val.inactiveImg">
</template>
<template v-slot:text>
{{val.name}}
</template>
</tab-bar-item>
</div>
2.2实现里面各个小组件,这里要用具名插槽
<div class='tabBarItem' @click="itemHandle">
<div v-if="iconActive">
<slot name="icon-active"></slot>
</div>
<div v-else="!iconActive">
<slot name="icon-inactive"></slot>
</div>
<div :style="changeColor" class="text">
<slot name="text"></slot>
</div>
</div>
因为底部的标签页跳转是要更换图标,因此可以用v-if,v-else来控制显示。
2.3要使得这类组件具有通用性和复用性,有些数据是不能写死的。
tabBarItem.vue
props: {
path: String,
fontColor: {
type: String,
default: "#A3A3A3",
},
},
我们可以在tabBar通过传递path,fontColor来改变里面子组件相关的属性,更多的属性可以
视情况而定
2.4根据路由跳转来对比父组件传进来的路径,可以得出哪个标签点击。
computed: {
iconActive() {
return this.$route.path === this.path;
},
changeColor() {
if (this.$route.path === this.path) {
return { color: "#009E97" };
} else {
return { color: "#A3A3A3" };
}
},
},
methods: {
itemHandle() {
this.$router.push(this.path);
},
},
3.优点
1.节省时间,减少代码
2,组件利用率高,适用性广
3.减少代码的堆积,代码模块化,便于维护和修改