我写在了入口App文件中 为父组件
<template> <div id="app"> <router-view /> //子组件 子传父 <Tabfooter :tabItems="tabItems" v-show="this.$route.meta.isShowTabbar"></Tabfooter> //this.$route.meta.isShowTabbar 是在路由中定义这个底部导航是否显示 </div> </template> <script> //引入子组件 import Tabfooter from "./components/tabber/Tab_footer"; // export default { //局部注册子组件 components: { Tabfooter }, data() { return { //用来装底部的内容 第一个是没选中的图标 tabItems:[ { icon:require("./assets/tabbar/home.png"), icon_active:require("./assets/tabbar/home_active.png"), title:"首页", path:"/" }, { icon:require("./assets/tabbar/classify.png"), icon_active:require("./assets/tabbar/classify_active.png"), title:"分类", path:"/classify" }, { icon:require("./assets/tabbar/cart.png"), icon_active:require("./assets/tabbar/cart_active.png"), title:"购物车", path:"/shop" }, { icon:require("./assets/tabbar/mine.png"), icon_active:require("./assets/tabbar/mine_active.png"), title:"个人", path:"/about" } ] } }, }; </script>子组件
<template> <div class="Tabfooter"> <div class="Tabfooter_item" v-for="(item,index) in items" :key="index" @click="gotourl(index)"> //点击时和当前下标一样 就让图标亮起来 <div><img :src="itemindex===index?item.icon_active:item.icon" alt="" width="42%"></div> <div :class="itemindex===index?'tab_item_active':'tab_item'">{{item.title}}</div> </div> </div> </template> <script> export default { //接受父组件传来的 props:{ tabItems:Array }, data() { return { items:this.tabItems, itemindex:0 //默认选中首页 } }, methods: { gotourl(index){ this.itemindex = index var qwe = this.tabItems[index] this.$router.push(qwe.path) } }, } </script> <style scoped> .Tabfooter{ width: 100%; height: 64px; position: fixed; bottom: 0; left: 0; display: flex; background: white; } .Tabfooter_item{ width: 25%; height: 64px; display: flex; flex-direction: column; align-items: center; text-align: center; } .tab_item{ color: gray; font-size: 0.25rem; } .tab_item_active{ color: red; font-size: 0.25rem; } </style>这样写是为了更好操作比如底部不止4个 就更改父组件data中定义的数组就好
