简单易懂的vue导航组件封装教程，让你轻松上手

前言

在移动端开发中，导航组件是必不可少的一部分。而 vue 基于 vant 封装的导航组件，不仅可以提高开发效率，更可以让用户体验更加友好和流畅。本文将详细介绍如何使用 vue 和 vant 搭建一个高质量的导航组件，让你的应用更上一层楼！

实现思路

当封装一个可复用的组件时，我们首先需要确定组件的功能和参数配置。在这个例子中，我们希望封装一个可定制的导航栏组件，具有标题、左侧按钮、右侧按钮等参数配置，并可以触发点击事件。

接下来，我们使用 vue 的单文件组件形式创建了一个名为 reusableNavBar 的组件。在 props 中定义了组件的参数，包括 title、leftText、rightText 等。这样，我们可以在使用组件时传入相应的值，从而定制组件的外观和行为。

在模板中，我们使用 van-nav-bar 组件，并将参数绑定到对应的属性上。参数值来自父组件传入的值。同时，我们把 click-left 和 click-right 事件和组件内部的 handleClickLeft 和 handleClickRight 方法绑定在一起，以便在触发点击事件时可以执行相应的逻辑。这样，用户使用组件时只需提供点击事件的处理函数即可。

在组件的方法中，当左侧按钮或右侧按钮被点击时，会触发 click-left 或 click-right 事件，并通过 $emit 方法将事件通知给父组件。父组件可以监听这些事件，并做出相应的处理。

通过这种方式，我们将 van-nav-bar 组件包装成一个可复用的组件 reusableNavBar，使得在多个页面或组件中可以共享使用，并且可根据需要定制外观和行为。

---

实现代码

话不多说，下面直接进入代码实战。

用到的属性以及事件

属性/事件	描述
title	标题
left-text	左侧文案
right-text	右侧文案
left-arrow	是否显示左侧箭头
border	是否显示下边框
fixed	是否固定在顶部
z-index	导航栏 z-index
safe-area-inset-top	是否开启顶部安全区适配
placeholder	固定在顶部时，是否在标签位置生成一个等高的占位元素
click-left（事件）	点击左侧按钮时触发
click-right（事件）	点击右侧按钮时触发

封装的文件

<template>
  <van-nav-bar :title="title" :left-text="leftText" :right-text="rightText" :left-arrow="leftArrow" :border="border" :fixed="fixed"
    :z-index="zIndex" :safe-area-inset-top="safeAreaInsetTop" :placeholder="placeholder" @click-left="handleClickLeft" @click-right="handleClickRight" />
</template>

<script>
export default {
  name: 'ReusableNavBar',
  props: {
    title: {
      type: String,
      required: true
    },
    leftText: {
      type: String,
      default: ''
    },
    rightText: {
      type: String,
      default: ''
    },
    leftArrow: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: true
    },
    fixed: {
      type: Boolean,
      default: false
    },
    zIndex: {
      type: Number,
      default: 1
    },
    safeAreaInsetTop: {
      type: Boolean,
      default: false
    },
    placeholder:{
  	  type: Boolean,
  	  default: true
	},
  },
  methods: {
    handleClickLeft() {
      this.$emit('click-left')
    },
    handleClickRight() {
      this.$emit('click-right')
    }
  }
}
</script>
<style scoped>
/* 样式上的一些修改 */
::v-deep .van-nav-bar {
  background: rgb(97, 151, 251);
}

::v-deep .van-nav-bar__title {
  color: white;
}

::v-deep .van-icon-arrow-left::before {
  color: white;
}

::v-deep .van-nav-bar__text {
  color: white;
}
</style>

---

日常组件的使用

<template>
  <div>
    <reusable-nav-bar title="标题" left-text="返回" right-text="退出" left-arrow border fixed :z-index="2" @click-left="handleClickLeft"
      @click-right="handleClickRight" />
  </div>
</template>

<script>
import ReusableNavBar from "@/components/reusableNavBar/index.vue";
export default {
  components: {
    ReusableNavBar,
  },
  methods: {
    handleClickLeft() {
      // 处理左侧按钮点击事件逻辑
      console.log("左边点击事件...");
    },
    handleClickRight() {
      // 处理右侧按钮点击事件逻辑
      console.log("右边点击事件...");
    },
  },
};
</script>

---

实现效果