一般开发时都会做一个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 赋值
以上操作完成
页面显示:
找的时候都没有对这个有详细的说明,太简单了吧,自己绕了很多弯路,希望能帮到小白。