在 Vue 2 中，Element UI 并没有一个直接命名为 PageHeader 的组件。然而，你可能是在寻找一种方式来创建自定义的页头（Page Header），这通常是通过组合 Element UI 的其他组件（如 el-header、el-row、el-col、el-title 等）来实现的。
但在 Vue 3 的 Element Plus 中，确实有一个 el-page-header 组件，用于展示页面的页头信息。下面我将分别介绍如何在 Vue 2 和 Vue 3 中实现类似的功能，并特别关注 Vue 3 中 el-page-header 组件的属性、事件和方法。
Vue 2 + 自定义页头
在 Vue 2 中，你可以使用 Element UI 的基础组件来构建自定义的页头。
示例
<template>
<el-header>
<el-row>
<el-col :span="24">
<h1>页面标题</h1>
<div>页面描述或副标题</div>
</el-col>
</el-row>
</el-header>
</template>
<script>
export default {
// ...
};
</script>
在这个例子中，我们使用了 el-header、el-row 和 el-col 组件来布局页头，并使用 h1 和 div 元素来显示标题和描述。
Vue 3 + Element Plus PageHeader
在 Vue 3 中，你可以使用 Element Plus 的 el-page-header 组件来快速创建一个页头。
属性（Props）
title：页头标题。content：页头内容，通常为描述性文本。tags：标签列表，通常用于显示页面的标签或分类。avatar：头像图片的 URL。breadcrumb：面包屑导航配置。back-icon：返回图标的类名。...：其他基础属性，如class、style等。
事件（Events）
el-page-header 组件在 Element Plus 中并没有定义特定的事件。
方法（Methods）
el-page-header 组件没有直接暴露任何方法供外部调用。
示例
<template>
<el-page-header
:title="title"
:content="content"
:avatar="avatarUrl"
:breadcrumb="[{ to: '/', label: '首页' }, { to: '/about', label: '关于' }]"
>
<template #tags>
<el-tag>标签1</el-tag>
<el-tag>标签2</el-tag>
</template>
</el-page-header>
</template>
<script setup>
import { ref } from 'vue';
const title = ref('页面标题');
const content = ref('页面描述或副标题');
const avatarUrl = ref('https://example.com/avatar.png');
</script>
在这个例子中，我们使用了 el-page-header 组件，并通过 title、content 和 avatar 属性分别设置了页头的标题、内容和头像。我们还通过 breadcrumb 属性配置了面包屑导航，并通过插槽 #tags 添加了标签。请注意，由于 Element Plus 的 API 可能会随着版本更新而发生变化，因此建议查阅最新的官方文档以获取最准确的信息。
