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 赋值

以上操作完成

页面显示：

找的时候都没有对这个有详细的说明，太简单了吧，自己绕了很多弯路，希望能帮到小白。