036_PageHeader页头

1. PageHeader页头

1.1. 如果页面的路径比较简单, 推荐使用页头组件而非面包屑组件。

1.2. Attributes

参数	说明	类型	可选值	默认值
title	标题	string	无	返回
content	内容	string		无

1.3. Events

事件名称	说明	回调参数
back	点击左侧区域触发	无

1.4. Slots

事件名称	说明
title	标题内容
content	内容

2. PageHeader页头例子

2.1. 使用脚手架新建一个名为element-ui-pageheader的前端项目, 同时安装Element插件。

2.2. 在components下创建PageHeader.vue 

<template>
  <div>
    <h1>基础</h1>
    <h4>如果页面的路径比较简单, 推荐使用页头组件而非面包屑组件。</h4>
    <el-page-header @back="goBack" content="详情页面"></el-page-header>
  </div>
</template>

<script>
export default {
  methods: {
    goBack () {
      console.log('go back')
    }
  }
}
</script>

2.3. 运行项目, 访问http://localhost:8080/#/PageHeader