一、背景

项目中多个页面的页脚都包含版权信息，并且各自有一个 Copyright.vue 的组件
经过对比， template 的内容一模一样，只是样式有些不同，这里准备抽取出来，用一个公共组件 CopyRight.vue 来统一管理

思路

• 公共组件 CopyRight.vue 作为子组件，每个包含 CopyRight.vue 的组件是父组件
• 通过 props 传值，父传子，把 class name 传过去
• CopyRight.vue 的 style 中，包含传过来的每个类名的样式

二、具体代码

Copyright.vue

<template>
  <section :class="cssClass" >
    <p>&copy;2013-{{currentYear}} xx公司版权所有</p>
  </section>
</template>

<script>
import getServiceTimeMixin from '~~/assets/mixins/get-service-time-mixin';

export default {
  mixins: [getServiceTimeMixin],
  props: {
    cssClass: {
      type: String,
      default: '',
    }
  },
}
</script>

<style lang="scss" scoped>
// 每个父组件对应的类名 都有自己的样式
.p-firm {
  padding: 36px 60px 36px;
  background-color: #263250;
  text-align: center;
  p,
  a {
    font-size: 24px;
    line-height: 43px;
    color: rgba(255, 255, 255, 0.4);
  }
}
.p-info {
  padding: 36px 60px 36px;
  background-color: #263250;
  text-align: center;
  p,
  a {
    font-size: 24px;
    line-height: 43px;
    color: rgba(255, 255, 255, 0.4);
  }
}
.p-live {
  padding: 60px 60px 80px;
  background-color: #00358d;
  text-align: center;
  p,
  a {
    font-size: 24px;
    line-height: 43px;
    color: #3f72c7;
  }
}
.p-studio {
  padding: 60px 60px 80px;
  background-color: #203b56;
  text-align: center;
  p,
  a {
    font-size: 24px;
    line-height: 43px;
    color: #3f72c7;
  }
}
.p-nhzb {
  margin: 60px 60px 10px;
  background-color: transparent !important;
  p,
  a {
    color: #ad8b8b !important;
    text-align: center;
  }
}
</style>

举例子 p-live/index.vue

<template>
    ....
    <CopyRight css-class="p-live"/>
    ....
</template>

<script>
import CopyRight from '../common/CopyRight'