vue中多个页面共用一个头部，但每个页面标题文字不一样

commonHeader.vue

<template>
  <div class="header">
     <div class="header-left">
      <span  @click="$router.go(-1)" class="el-icon-arrow-left"></span>
     </div>
      <div class="header-title">
         <span class="header-text">{{headTitle}}</span>
      </div>
  </div>
</template>
<script>
export default {
  name: 'commonHeader',
  data () {
    return {
    
    }
  },
  props: ['headTitle'],
}
</script>

其他页面

<template>
    <em-header :headTitle = "pageTitle"></em-header>
</template>
<script>
    import EmHeader from "@/components/commonHeader" //引入header 
    export default{ 
　　　　data(){ 
　　　　　　pageTitle:'绑定', //页面header内容  
　　　　}, 
　　　　components:{ 
　　　　　　EmHeader 
　　　　}, 
　　} 
</script>

效果图