Vue底部导航栏封装组件

我写在了入口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中定义的数组就好