vue自定义组件实现底部导航栏动态切换

我会带着你远行 2023-07-20 13:55 1阅读 0赞

我们都知道vue的两大特性：组件化和数据驱动，今天我们就来说说关于vue组件开发，最近由于开发一款移动端商城，底部的导航栏就利用组件化实现的，下面先看看效果图：

![20200402105638461.png][]

实现这个功能我们需要知道父子组件之间的传值方式：

简单来说，子组件通过props方法接受父组件传来的值，子组件通过$emit方法来向父组件发送数据。（具体案例可以看我之前写的博客[https://blog.csdn.net/qq\_37481512/article/details/89641922][https_blog.csdn.net_qq_37481512_article_details_89641922]）。

下面我们来说说如何来实现这个功能：

一、新建首页、购物车、个人中心三个页面：

![20200402110341171.png][]

二、配置路由router文件夹下的index.js:

import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)
    
    //首页
    import member from '@/views/member/member'
    import car from '@/views/car/car'
    import my from '@/views/my/my'
    
    
    const router = new Router({
    
      routes: [
        {
          path: '/member',
          name: 'member',
          component: member,
        },
        {
          path: '/',
          name: '首页',
          redirect: '/member',
          component: member,
        },
        {
          path: '/car',
          name: 'car',
          component: car,
        },
        {
          path: '/my',
          name: 'my',
          component: my,
        },
      ],
      mode: "history"//干掉地址栏里边的#号键
    });
    
    export default router

三、开始创建子组件（components文件下新建 footer.vue），注意：底部导航图片需要通过require方式引入，子组件通过props方法来接收父组件传来的值：footIndex1

<template>
      <div>
        <div id="footer_divId">
          <div class="fott_class">
            <div
              v-for="(item,index) in footerImg"
              @click="clickFoo(index)"
              :key="index"
              :id="index"
              :class="index==timepartValue?'commColor':''"
            >
              <img :src="index==timepartValue?item.img2:item.img1" alt />
              <p>{
       {item.name}}</p>
            </div>
          </div>
        </div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          selected: true,
          tab: "tab",
          timepartValue: "",
          footerImg: [
            {
              img1: require("../assets/footer/in1.jpg"),
              img2: require("../assets/footer/in2.jpg"),
              name: "首页"
            },
            {
              img1: require("../assets/footer/che1.jpg"),
              img2: require("../assets/footer/che2.jpg"),
              name: "购物车"
            },
            {
              img1: require("../assets/footer/my.png"),
              img2: require("../assets/footer/my2.jpg"),
              name: "个人中心"
            },
            
          ]
        };
      },
      props: ["footIndex1"],
      methods: {
        clickFoo(index) {
          if (index == 0) {
            this.$router.push("/member");
          } else if (index == 1) {
            this.$router.push("/car");
          } else if (index == 2) {
            this.$router.push("/my");
          } 
        }
      },
      mounted(){
        
      },
      watch: {
        footIndex1: function(data) {
         console.log(data,'ddddddddddddddddd')
          this.timepartValue = data;
        }
      },
    
      mounted() {}
    };
    </script>
    <style lang="scss">
    #footer_divId {
      position: fixed;
      height: 1rem;
       bottom: 0;
       width: 100%;
       background-color: #fff;
       z-index: 10;
       border-top: 1px solid #e6e6e6;
      
      
      .fott_class {
        display: flex;
        justify-content: space-around;
        align-items: center;
       div{
         width: 33.3%;
         text-align: center;
        color: #959CA7;
        font-size: 0.2rem;
       }
        img {
          width: 0.5rem;
          height: 0.5rem;
          vertical-align: middle;
          margin-bottom: 0.05rem
        }
      }
    }
    
    
    </style>

四、在父组件app.vue中引用刚才创建的组件:

import footercon from "@/components/footer";

注册组件：

components: {
        footercon
      },

通过v-show="footer\_show"来控制底部导航的显示隐藏

此时需要在新建的三个底部导航页面中通过$emit来给父组件app.vue中传值来实现底部显示隐藏：

export default {
        data(){
            return{}
        },
         created() {
        this.$emit("footer", true);
        this.$emit("checkHomeIndex", 0);
      }

this.$emit("checkHomeIndex", 0);//用来传当前页面的下标，用来动态切换导航

this.$emit("footer", true);//表示此时底部导航显示，false为隐藏

app.vue完整代码：

<template>
      <div id="app">
        <footercon v-show="footer_show" :footIndex1="footIndexn"  ></footercon>
        <router-view v-on:footer="footer" v-on:checkHomeIndex="checkHomeIndex" />
      </div>
    </template>
    
    <script>
    import footercon from "@/components/footer";
    export default {
      components: {
        footercon
      },
      data() {
        return {
          footer_show: false,
          footIndexn: "" //记录当前底部选中项
        };
      },
      methods: {
        //是否显示底部
        footer: function(bool) {
         console.log(bool,'pppppppppp')
          this.footer_show = bool;
        },
        // 判断当前在哪一个页面
        checkHomeIndex: function(index) {
          this.footIndexn = index;
        },
    
      }
    };
    </script>
    <style lang="scss">
    input {
      -webkit-appearance: none;
    }
    input::-webkit-input-placeholder {
      font-size: 0.27rem !important;
      line-height: 0.3rem !important;
    }
    input:not([type="checkbox"]) {
      box-shadow: none;
      -webkit-appearance: none;
    }
    .indet_in21 {
      font-size: 0.26rem !important;
    }
    .indet_in1 {
      font-size: 0.26rem !important;
    }
    
    * {
      padding: 0;
      margin: 0;
    }
    #app {
      font-family: "mediumttf";
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: #212a3d;
      font-size: 12px;
    }
    a {
      text-decoration: none;
    }
    .shadow_con {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      margin: 0 !important;
    }
    .app_conBox {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      margin: 0 !important;
    }
    .mint-actionsheet-button {
      color: #26a2ff;
    }
    .mint-tabbar {
      z-index: 888;
    }
    
    .real_bankCon {
      position: relative;
      img {
        position: absolute;
        left: rem;
        right: 1.6rem;
        height: 0.14rem;
        top: 0.4rem;
      }
    }
    
    /* 行情列表下载app样式*/
    .downloadBtn p {
      text-align: center;
      color: #959ca7;
      font-size: 0.28rem;
      margin: 0.2rem 0;
      span {
        color: #e63a3c;
        text-decoration: underline;
      }
    }
    
    /*  暂无数据展位图*/
    .null-list-img {
      text-align: center;
      img {
        width: 60%;
        margin: 0 auto;
      }
    }
    .null-list-img span {
      display: block;
      text-align: center;
      font-size: 0.32rem;
      color: #959ca7;
      margin-top: 0.48rem;
    }
    .noCard {
      .noBank {
        height: 3.9rem;
        margin-left: 20%;
      }
      p {
        font-size: 0.32rem;
        font-weight: 500;
        color: #959ca7;
        text-align: center;
        margin-bottom: 0.9rem;
      }
    }
    .main-body {
      /* 加上这个才会有当数据充满整个屏幕，可以进行上拉加载更多的操作 */
      overflow: scroll;
    }
    .acc_xieyi {
      z-index: -999 !important;
    }
    li {
      list-style: none;
    }
    
    .mint-swipe-indicator.is-active {
      background: #fff880 !important;
    }
    .mint-swipe-indicator {
      background: #fff100 !important;
    }
    .mint-swipe-indicator {
      width: 0.22rem !important;
      height: 0.1rem !important;
      border-radius: 0.1rem !important;
      opacity: 1 !important;
    }
    .expand_font {
      font-size: 0.32rem !important;
      color: #686e7a;
    }
    .expand_btn span {
      border: none !important;
      box-shadow: none !important;
      background: #ffe100 !important;
    }
    
    </style>

总结：其实这就是一个典型的父子组件传值问题，相信只要知道父子组件如何传值实现起来应该不难，最后祝大家技术越来越厉害。

[20200402105638461.png]: /images/20230528/730495a4c5d045adab04279f44106e04.png
[https_blog.csdn.net_qq_37481512_article_details_89641922]: https://blog.csdn.net/qq_37481512/article/details/89641922
[20200402110341171.png]: /images/20230528/3b4f8c5f90ef41c8943ea9f8681077a4.png