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

最新推荐文章于 2024-07-30 18:36:42 发布

置顶

缘飞梦

最新推荐文章于 2024-07-30 18:36:42 发布

阅读量5.1k

点赞数 5

分类专栏：父子组件传值 vue 文章标签： vue js

本文链接：https://blog.youkuaiyun.com/qq_37481512/article/details/105264624

版权

本文介绍了如何使用Vue的组件化和数据驱动特性实现移动端商城的底部导航栏动态切换。通过创建子组件`footer.vue`，接收父组件通过props传递的值，并利用$emit向父组件发送数据，实现在不同页面间切换时底部导航的显示和隐藏。详细步骤包括新建页面、配置路由、子组件的创建和父子组件间的通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

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

二、配置路由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

三、开始创建子组件࿰