Vue实现移动端原生TopHeader公共组件

1. 功能组件创建、位置存放；
2. 
   .vue文件代码

<template>
  <div class="topHeader">
    <div class="headerContent">
      <!-- <i class="el-icon-arrow-left"></i> -->
      <span  @click="$router.go(-1)">
        <svg t="1569289747244" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1980" width="16" height="16"><path d="M671.807 927.804l-415.632-415.804 415.632-415.803 63.445 63.616-352.017 352.209 352.017 352.102z" p-id="1981" fill="#353535"></path></svg>
      </span>
      
      <h2 class="centerMsg">{{ centerMsg }}</h2>
      <h3 class="rightMsg">{{rightMsg}}</h3>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopHeader',
  props: {
    centerMsg: String,
    rightMsg:String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h2,h3{
  font-weight: normal;
}
  .topHeader{
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height:5.5rem;
    line-height: 5.5rem;
    background-color: #fff;
    // background-color: #ccc;
    .headerContent{
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 1rem;
      .centerMsg{
        font-weight: 700;
      }
    }
  
  }
</style>

提示：需要有sass环境哦！ （也可手动改为css）

<template>
 <div class="register">
      <TopHeader  centerMsg="注册" rightMsg="须知" />
      <formCommon  formInputOne="请输入手机号"  formInputTwo="请输入验证码" formAa="获取验证码" formOtherWays="账号密码登录" formLoginBtn="同意协议并注册"></formCommon>
      <div class="agreement">
        <p class="read">已阅读并同意以下协议</p>
        <p class="clause">赚钱吧平台服务协议、隐私权政策、法律声明</p>
      </div>
  </div>
</template>

<script>
import TopHeader from '@/components/TopHeader.vue'
import formCommon from '@/components/formCommon.vue'
export default {
  name:'register',
  components: {
    TopHeader,
    formCommon 
  },
  data () {
    return {
    }
  }
}

</script>

<style scoped lang='scss'>
@import '@/style/mixin.scss';
.register{ 
  padding-top: 7rem;  
  box-sizing: border-box;
  .agreement{
    width: 90%;
    margin: 0 auto;

    .read{
      color:$cy;
      font-size: 1.2rem; 
    }
    .clause{
      color:$red; // 手动改一下需要的颜色
      font-size: 1rem; 
      margin-top: 0.3rem;
    }
  }
}
  

这个注册页我使用了两个公共组件，props在公共组件中声明要返回的数据，和数据类型；
在这个使用的页面里导入对应路径的公共组件，并在 components中挂载对应组件名！

··········小白记