封装一个顶部标题栏

<template>
  <div class="nav-bar">
      <!-- 三个插槽，分别在左中右放东西 -->
      <div class="left"><slot name="left"></slot></div>
      <div class="center"><slot name="center"></slot></div>
      <div class="right"><slot name="right"></slot></div>
  </div>
</template>
<script>
export default {
    name: "NavBar"
}
</script>
<style scoped>
.nav-bar{
    /* 使用flex布局 */
    display: flex;
    line-height: 44px;
    height:44px;
    /* 文字居中 */
    text-align: center;
    /*增加下边框效果 */
    box-shadow: 0 1px 1px rgba(100, 100, 100, .1);
}
.left,.right{
    width:60px;
}
.center{
    /* 左右设置了固定宽度，中间设置flex:1会占居剩下的所有空间 */
    flex:1;
}
</style>

使用的时候

<nav-bar class="home-nav">
    <div slot="center">
    标题
    </div>
    </nav-bar>

样式设置

.home-nav{
    background-color:var(--color-tint);
        color:#fff;
}

var(--color-tint);//是自定的颜色