vue之自定义一个NavBar导航栏组件

<template>
  <div class="nav-bar">
    <div class="title">
      <div class="blak">
        <img
          class="img"
          src="../../assets/image/left.png"
          alt=""
          @click="blackclick"
          v-if="isblack"
        />
      </div>
      <div class="nav_title">{{ text }}</div>
      <div class="search">
        <img
          class="img"
          src="../../assets/image/search.png"
          alt=""
          @click="searchclick"
          v-if="issearch"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: "首页",
    },
    isblack: {
      type: Boolean,
      default: false,
    },
    issearch: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    blackclick() {
      this.$emit("blackclick");
    },
    searchclick() {
      console.log("搜索");
    },
  },
};
</script>

<style scoped>
.nav-bar {
  position: relative;
}
.title {
  height: 40px;
  background-color: rgb(59, 161, 245);
  color: white;
  line-height: 40px;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 999;
  font-weight: 600;
  display: flex;
}

.blak {
  flex: 1;
  display: flex;
  align-items: center;
}
.nav_title {
  flex: 1;
  text-align: center;
}
.search {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: right;
}
.img {
  width: 25px;
  height: 25px;
}
</style>

使用

import NavBar from "../../components/nav-bar/nav-bar.vue";

 components: {
    NavBar,
  },

 <nav-bar
      text="商品详情"
      @blackclick="backclick"
      :isblack="isblack"
      :issearch="issearch"
    ></nav-bar>

效果图