vue slot使用（提取页面公共部分）

页面中有多处的标题是一样的，因此可以使用slot插槽单独写在一个组件中，其他页分别引入

步骤： 

1.写公共部分的组件页面，HeadSlot.vue

<template>
  <div class="head">
    <p>
      <slot></slot>
    </p>
    <img v-show="imgShow" :src="imgUrl" alt="" />
  </div>
</template>

<script>
export default {
  name: "headSlot",
  data() {
    return {
      imgUrl: "/images/icon-more.png",
    };
  },
  props: {
    imgShow: {
      default: true,
    },
  },
};
</script>

<style scoped lang="less">
.head {
  position: relative;

  p {
    /*width: 8.4rem;*/
    height: 2.8rem;
    font-size: 2rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #008080;
    line-height: 2.8rem;
    margin-left: 2rem;
    text-align: left;
  }

  img {
    position: absolute;
    top: 0;
    right: 4rem;
  }

  &::before {
    content: "";
    position: absolute;
    left: 0.1rem;
    top: 0.5rem;
    background: #333333;
    width: 0.3rem;
    height: 2.2rem;
    background: linear-gradient(270deg, #4ea9fe 0%, #6562bf 100%);
    border-radius: 2px;
  }
}
</style>

 2.其他页面分别引入使用