diff --git a/components/page-header/index.jsx b/components/page-header/index.jsx
index 4f317c00f..814dca72e 100644
--- a/components/page-header/index.jsx
+++ b/components/page-header/index.jsx
@@ -1,12 +1,12 @@
+import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { getComponentFromProp, getOptionProps } from '../_util/props-util';
+import { getComponent, getOptionProps } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
 import ArrowLeftOutlined from '@ant-design/icons-vue/ArrowLeftOutlined';
 import Breadcrumb from '../breadcrumb';
 import Avatar from '../avatar';
 import TransButton from '../_util/transButton';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import Base from '../base';
 
 export const PageHeaderProps = {
   backIcon: PropTypes.any,
@@ -52,17 +52,17 @@ const renderBreadcrumb = (h, breadcrumb) => {
 
 const renderTitle = (h, prefixCls, instance) => {
   const { avatar } = instance;
-  const title = getComponentFromProp(instance, 'title');
-  const subTitle = getComponentFromProp(instance, 'subTitle');
-  const tags = getComponentFromProp(instance, 'tags');
-  const extra = getComponentFromProp(instance, 'extra');
+  const title = getComponent(instance, 'title');
+  const subTitle = getComponent(instance, 'subTitle');
+  const tags = getComponent(instance, 'tags');
+  const extra = getComponent(instance, 'extra');
   const backIcon =
-    getComponentFromProp(instance, 'backIcon') !== undefined ? (
-      getComponentFromProp(instance, 'backIcon')
+    getComponent(instance, 'backIcon') !== undefined ? (
+      getComponent(instance, 'backIcon')
     ) : (
       <ArrowLeftOutlined />
     );
-  const onBack = instance.$listeners.back;
+  const onBack = instance.$attrs.onBack;
   const headingPrefixCls = `${prefixCls}-heading`;
   if (title || subTitle || tags || extra) {
     const backIconDom = renderBack(instance, prefixCls, backIcon, onBack);
@@ -94,15 +94,17 @@ const renderChildren = (h, prefixCls, children) => {
 const PageHeader = {
   name: 'APageHeader',
   props: PageHeaderProps,
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
+  setup() {
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   render(h) {
     const { getPrefixCls, pageHeader } = this.configProvider;
     const props = getOptionProps(this);
     const { prefixCls: customizePrefixCls, breadcrumb } = props;
-    const footer = getComponentFromProp(this, 'footer');
-    const children = this.$slots.default;
+    const footer = getComponent(this, 'footer');
+    const children = this.$slots.default && this.$slots.default();
 
     let ghost = true;
 
@@ -138,9 +140,8 @@ const PageHeader = {
 };
 
 /* istanbul ignore next */
-PageHeader.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(PageHeader.name, PageHeader);
+PageHeader.install = function(app) {
+  app.component(PageHeader.name, PageHeader);
 };
 
 export default PageHeader;
diff --git a/examples/index.js b/examples/index.js
index 46e31cb35..c52b52116 100644
--- a/examples/index.js
+++ b/examples/index.js
@@ -12,6 +12,7 @@ import Anchor from 'ant-design-vue/anchor';
 import ConfigProvider from 'ant-design-vue/config-provider';
 import Result from 'ant-design-vue/result';
 import Spin from 'ant-design-vue/spin';
+import PageHeader from 'ant-design-vue/page-header';
 import Skeleton from 'ant-design-vue/skeleton';
 import Empty from 'ant-design-vue/empty';
 import Timeline from 'ant-design-vue/timeline';
@@ -27,6 +28,7 @@ createApp(App)
   .use(Alert)
   .use(Divider)
   .use(Result)
+  .use(PageHeader)
   .use(Anchor)
   .use(Skeleton)
   .use(Spin)