fix(components): [page-header] use $slots instead of useSlots (#19455)

* fix(components): [page-header] use `$slots` instead of `useSlots`

closed #19453

* test(components): [page-header] add classes slots rendering case

packages/components/page-header/__tests__/page-header.test.tsx

@@ -94,6 +94,44 @@ describe('PageHeader.vue', () => {
     expect(wrapper.find('.el-page-header__title').text()).toEqual(AXIOM)
   })
 
+  test('conditional slots rendering', async () => {
+    const wrapper = mount(
+      (props: {
+        showDefault: boolean
+        showBreadcrumb: boolean
+        showExtra: boolean
+      }) => (
+        <PageHeader
+          v-slots={{
+            default: props.showDefault ? () => AXIOM : undefined,
+            breadcrumb: props.showBreadcrumb ? () => AXIOM : undefined,
+            extra: props.showExtra ? () => AXIOM : undefined,
+          }}
+        />
+      ),
+      {
+        props: {
+          showDefault: false,
+          showBreadcrumb: false,
+          showExtra: false,
+        },
+      }
+    )
+    expect(wrapper.classes()).not.toContain('is-contentful')
+    expect(wrapper.classes()).not.toContain('el-page-header--has-breadcrumb')
+    expect(wrapper.classes()).not.toContain('el-page-header--has-extra')
+
+    await wrapper.setProps({
+      showDefault: true,
+      showBreadcrumb: true,
+      showExtra: true,
+    })
+
+    expect(wrapper.classes()).toContain('is-contentful')
+    expect(wrapper.classes()).toContain('el-page-header--has-breadcrumb')
+    expect(wrapper.classes()).toContain('el-page-header--has-extra')
+  })
+
   test('event back', async () => {
     const wrapper = mount(() => <PageHeader content={AXIOM} />)
     const pageHeader = wrapper.findComponent(PageHeader)

packages/components/page-header/src/page-header.vue

@@ -1,5 +1,14 @@
 <template>
-  <div :class="kls">
+  <div
+    :class="[
+      ns.b(),
+      {
+        [ns.m('has-breadcrumb')]: !!$slots.breadcrumb,
+        [ns.m('has-extra')]: !!$slots.extra,
+        [ns.is('contentful')]: !!$slots.default,
+      },
+    ]"
+  >
     <div v-if="$slots.breadcrumb" :class="ns.e('breadcrumb')">
       <slot name="breadcrumb" />
     </div>
@@ -43,7 +52,6 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, useSlots } from 'vue'
 import { ElIcon } from '@element-plus/components/icon'
 import { ElDivider } from '@element-plus/components/divider'
 
@@ -56,20 +64,9 @@ defineOptions({
 
 defineProps(pageHeaderProps)
 const emit = defineEmits(pageHeaderEmits)
-const slots = useSlots()
 
 const { t } = useLocale()
 const ns = useNamespace('page-header')
-const kls = computed(() => {
-  return [
-    ns.b(),
-    {
-      [ns.m('has-breadcrumb')]: !!slots.breadcrumb,
-      [ns.m('has-extra')]: !!slots.extra,
-      [ns.is('contentful')]: !!slots.default,
-    },
-  ]
-})
 
 function handleClick() {
   emit('back')