一、Vant导航栏组件

在Vant组件库中，有给我们提供了一个导航栏组件，所以我们可以直接使用已经封装好的组件。

# App.vue组件中
<template>
    # 组件使用
    <van-nav-bar
        :title="title"
    />
</template>

<script>
    # 导入需要使用的组件
    import { NavBar } from 'vant';
    
    export default{
        name: 'navBar',
        components:{    # 组件声明
            [NavBar.name]:NavBar
        },
        data() {
            return {
                title: '全视眼镜商城'
            }
        },
    }
</script>

二、导航栏样式说明

首页中导航栏是显示的，分类中也是显示的，搜索中是不显示的，购物车中是显示的，我的是不显示的，而且在对应的每个页面中，显示的文字内容是会不一样的。

三、导航栏定制

在Vant组件库中，只是给我们提供了一个显示样式，但我们在项目中，每个页面显示会不一样，那么我们需要在页面切换时，进行调整。

注意组件的问题: 导航栏在添加在App.vue中的，而导航栏中需要显示什么内容，到导航栏是否要显示，是在切换组件时涉及到的。

即可以在每个子组件中HomeView、AssortView、SearchView、CartView、MineView中设置显示内容，以及到导航栏显示与否。在页面切换时候告诉父组件即可，这就会涉及到子组件 传值给 父组件，实现方式是自定义事件。

• 显示样式定制(在浏览器中查看元素，找到对应的元素名称)

  <style>
  .van-nav-bar{
      height: 2.8125rem;
      background: red;
      font-size: 1rem;
      font-weight: 700;
      line-height: 2.8125rem;
      text-align: center;
  }
  .van-nav-bar .van-nav-bar__title{
      color: white;
  }
  </style>

• 父组件App.vue属性和方法定义

  <script>
  import {
      NavBar,
  } from 'vant';
  
  export default {
      name: 'app',
      components: {
          [NavBar.name]:NavBar
      },
      data() {
          return {
              title: '',    // 导航标题(子组件传递过来)
              navViewShow: true,// 导航显示或隐藏
          }
      },
      methods:{
          getTitle: function(title){   // 获取到的标题
              this.title = title
          },
          getShow: function(temp){    // 获取到导航的显示隐藏
              this.navViewShow = temp
          }
      }
  }
  </script>

• 父组件App.vue模板中显示控制 【因为子组件渲染位置是在router-view中】

  <template>
  <div id="app">
      <!-- 导航标题，以及显示与否绑定 -->
      <van-nav-bar
          :title="title"
          fixed
          v-show='navViewShow'
      />
  
      <!-- 添加两个自定义事件 -->
      <router-view @onTitle='getTitle' @onNavShow='getShow'></router-view>
  </div>
  </template>

• 子组件 【以HomeView.vue组件为例】

  <script>
  export default{
      name:'homeView',
      data() {
          return {
              title: '全视眼镜商城',
              navViewShow: true
          }
      },
      created() {    // 这会涉及到组件的生命周期问题【实例已经创建完成之后被调用】
          this.$emit('onTitle', this.title)    // 触发事件，发送标题显示内容
          this.$emit('onNavShow', this.navViewShow)    // 触发事件，发送导航栏显示或隐藏
      }
  }
  </script>