父组件传子组件参数限制String类型
![](https://img2022.cnblogs.com/blog/2111933/202211/2111933-20221123223648428-2111258837.png)
<template>
<div class="tab-bar-item" @click="itemClick">
<div v-if="!isActive"><slot name="item-icon"></slot></div>
<div v-else><slot name="item-icon-active"></slot></div>
<div :class="{active: isActive}"><slot name="item-text"></slot></div>
</div>
</template>
<script>
export default {
name: "TabBarItem",
props:{
path: String
},
data(){
return{
isActive: false
}
},
methods: {
itemClick(index){
this.$router.push(this.path).catch(err => {});
}
}
}
</script>
<style>
.tab-bar-item{
flex: 1;
text-align: center;
height: 49px;
}
.tab-bar-item img{
width: 20px;
height: 20px;
}
.active{
color: red;
}
</style>