在 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 可能会随着版本更新而发生变化，因此建议查阅最新的官方文档以获取最准确的信息。