0Pricing
Vue Academy · Lektion

Muster der Higher-Order Components (HOC)

Komponenten mit HOCs umschließen, Props und Slots weiterreichen und HOC mit Composable vergleichen

Muster der Higher-Order Components (HOC) ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist eine Higher-Order Component

Eine Higher-Order Component (HOC) ist eine Funktion, die eine Komponente entgegennimmt und eine neue Komponente zurückgibt, die sie umschließt. Sie fügt übergreifendes Verhalten wie Logging, Authentifizierungsprüfungen oder das Laden von Daten hinzu, ohne das Original zu verändern.

Die Funktionssignatur

Eine HOC wird konventionell mit dem Präfix with benannt. Sie erhält die umschlossene Komponente und gibt eine erweiterte Komponente zurück.

function withLogging(Wrapped) {
  // return a new component
}

defineComponent zurückgeben

Die neue Komponente wird mit defineComponent erstellt. Ihre Setup-Funktion rendert die umschlossene Komponente mithilfe von h.

import { defineComponent, h } from "vue";

function withLogging(Wrapped) {
  return defineComponent({
    setup(props, ctx) {
      return () => h(Wrapped, props, ctx.slots);
    }
  });
}

Attribute weiterreichen

Damit der Wrapper transparent bleibt, verteilen Sie ctx.attrs auf die umschlossene Komponente. Dadurch werden class, style und alle nicht erkannten Props weitergereicht.

setup(props, { attrs, slots }) {
  return () => h(Wrapped, { ...attrs }, slots);
}

Slots weiterreichen

Übergeben Sie das slots-Objekt des Wrappers als Children-Argument, damit die umschlossene Komponente weiterhin alle Slot-Inhalte vom Verwender erhält.

return () => h(Wrapped, attrs, slots);

Übergreifendes Verhalten hinzufügen

Genau darin liegt der Zweck: Verhalten einzuschleusen. In diesem Beispiel protokollieren wir das Mounten und Unmounten rund um die umschlossene Komponente.

import { onMounted, onUnmounted } from "vue";

function withLogging(Wrapped) {
  return defineComponent({
    setup(props, { attrs, slots }) {
      onMounted(() => console.log("mounted"));
      onUnmounted(() => console.log("unmounted"));
      return () => h(Wrapped, attrs, slots);
    }
  });
}

Die HOC verwenden

Umschließen Sie eine beliebige Komponente und verwenden Sie das Ergebnis wie eine normale Komponente in Templates oder anderen Render-Funktionen.

import BaseTable from "./BaseTable.vue";

const LoggedTable = withLogging(BaseTable);
// register or use LoggedTable like any component

Den Wrapper benennen

Setzen Sie einen name, damit der Wrapper in den Vue DevTools erkennbar ist. Wenn Sie den Namen der umschlossenen Komponente einbeziehen, bleibt der Komponentenbaum übersichtlich.

return defineComponent({
  name: "WithLogging(" + (Wrapped.name || "Anonymous") + ")",
  setup(props, ctx) { /* ... */ }
});

Zusätzliche Props einschleusen

Eine HOC kann der umschlossenen Komponente zusätzliche Props bereitstellen, etwa einen geladenen Datensatz oder ein Feature-Flag.

function withUser(Wrapped) {
  return defineComponent({
    setup(props, { attrs, slots }) {
      const user = inject("currentUser");
      return () => h(Wrapped, { ...attrs, user }, slots);
    }
  });
}

HOC oder Composables

Composables teilen Logik und werden in Vue 3 häufig bevorzugt. HOCs eignen sich am besten, wenn Sie das Rendering einer vorhandenen Komponente umschließen müssen, die Sie nicht bearbeiten können, oder wenn Sie eine Grenze wie die Fehlerbehandlung standardisieren möchten.

Mehrere HOCs kombinieren

Da jede HOC eine Komponente zurückgibt, werden sie durch Verschachtelung kombiniert. Wenden Sie sie von außen nach innen an.

const Enhanced = withLogging(withUser(BaseTable));

Kurztest

Was muss ein HOC-Wrapper an die umschlossene Komponente weiterreichen, damit er transparent bleibt?

Zusammenfassung

Eine HOC wie withLogging(Wrapped) gibt eine neue defineComponent zurück, deren Setup die umschlossene Komponente mit h(Wrapped, attrs, slots) rendert und dabei übergreifendes Verhalten wie Logging oder eingeschleuste Props hinzufügt. Reichen Sie Attributes und Slots weiter, damit der Wrapper transparent bleibt, und bevorzugen Sie Composables, wenn Sie nur Logik teilen möchten.

Häufig gestellte Fragen

Ist die Lektion „Muster der Higher-Order Components (HOC)“ kostenlos?

Ja — der vollständige Text von „Muster der Higher-Order Components (HOC)“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Muster der Higher-Order Components (HOC)“?

Komponenten mit HOCs umschließen, Props und Slots weiterreichen und HOC mit Composable vergleichen Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Muster der Higher-Order Components (HOC)“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Die Funktion h() im Detail
  2. JSX in Vue 3 mit Vite
  3. Dynamische Komponenten mit render-Funktionen
  4. Muster der Higher-Order Components (HOC)
← Zurück zu Vue Academy