Vue.js 之（mint-ui）控件mt-header 的title傳值

一般開發時都會做一個header.vue 存放每個頁面模板的 頁頭部位
剛剛接觸到 mint-ui的 mt-header
所有的東西都是從頭開始，一個mt-header 的 title 動態傳值就給難住了，（示例給的是靜態賦值）想改成動態，知道是 :title 具體怎麼寫卻不會，最後終於解決。

首先是在header.vue 中的代碼 ，這裏設置爲動態

<template>
  <div>
     <mt-header  :title ="title" >
       <router-link to="/help/usermanual" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      </mt-header>
  </div>
</template>

腳本中定義要接收的變量 title
固定寫法 props:

<script>
export default {
  props: {
    title: String
  }
}
</script>

以上 header.vue 部分結束

----------------------分割線--------------------------------------
調用header.vue 的頁面

1 先用import 引用組件
2、components ：聲明組件（ 叫法應該不專業,純屬個人理解)

<script>
import { Toast, Header} from 'mint-ui'
import HelpHeader from '@/views/help/helpheader'

export default {
  name: 'HelpLogin',
  components: {
    HelpHeader
  },
  data () {
    return {
      pageName: '登陸幫助演示',
      username: '',
      password: '',
      vcode: '',
      rememberme: false,
      imgsrc: '',
      loading: false,
      ip: ''
    }
  }
 }
</script>

3 在應用頁面調用header頁中的自定義控件

注意這裏調用的時候 還寫成 :title=‘變量名’ 的格式
pageName = 變量名
即頁面的標題名稱

4、pageName 賦值

以上操作完成

頁面顯示：

找的時候都沒有對這個有詳細的說明，太簡單了吧，自己繞了很多彎路，希望能幫到小白。