Mönstret Higher-Order Components (HOC)
Omslut komponenter med HOC:er, vidarebefordra props och slots och avgör när HOC passar bättre än en composable.
Mönstret Higher-Order Components (HOC) är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 4 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad är en Higher-Order Component
En Higher-Order Component (HOC) är en funktion som tar en komponent och returnerar en ny komponent som omsluter den. Den lägger till tvärgående beteende, till exempel loggning, autentiseringskontroller eller dataladdning, utan att ändra originalet.
Funktionssignaturen
En HOC namnges enligt konvention med prefixet with. Den tar emot den omslutna komponenten och returnerar en förbättrad komponent.
function withLogging(Wrapped) {
// return a new component
}Returnera defineComponent
Den nya komponenten byggs med defineComponent. Dess setup-funktion renderar den omslutna komponenten via h.
import { defineComponent, h } from "vue";
function withLogging(Wrapped) {
return defineComponent({
setup(props, ctx) {
return () => h(Wrapped, props, ctx.slots);
}
});
}Vidarebefordra attribut
För att wrappern ska vara transparent sprider du ctx.attrs till den omslutna komponenten. Det skickar vidare class, style och alla props som inte känns igen.
setup(props, { attrs, slots }) {
return () => h(Wrapped, { ...attrs }, slots);
}Vidarebefordra slots
Skicka wrapperns slots-objekt som children-argumentet, så att den omslutna komponenten fortfarande får allt slot-innehåll från användaren.
return () => h(Wrapped, attrs, slots);Lägga till tvärgående beteende
Huvudsyftet är att injicera beteende. Här loggar vi montering och avmontering runt den omslutna komponenten.
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);
}
});
}Använda HOC:en
Omslut valfri komponent och använd resultatet som en vanlig komponent i mallar eller andra renderfunktioner.
import BaseTable from "./BaseTable.vue";
const LoggedTable = withLogging(BaseTable);
// register or use LoggedTable like any componentNamnge wrappern
Ange ett name så att wrappern kan identifieras i Vue DevTools. Genom att kombinera med namnet på den omslutna komponenten förblir trädet lättläst.
return defineComponent({
name: "WithLogging(" + (Wrapped.name || "Anonymous") + ")",
setup(props, ctx) { /* ... */ }
});Injicera extra props
En HOC kan tillhandahålla ytterligare props till den omslutna komponenten, till exempel en hämtad datauppsättning eller en feature-flagga.
function withUser(Wrapped) {
return defineComponent({
setup(props, { attrs, slots }) {
const user = inject("currentUser");
return () => h(Wrapped, { ...attrs, user }, slots);
}
});
}HOC jämfört med composables
Composables delar logik och föredras ofta i Vue 3. HOC:er passar bäst när du måste omsluta renderingen av en befintlig komponent som du inte kan ändra, eller när du vill standardisera en gräns som felhantering.
Kombinera flera HOC:er
Eftersom varje HOC returnerar en komponent kan de kombineras genom nästling. Tillämpa dem i ordningen ytterst sist.
const Enhanced = withLogging(withUser(BaseTable));Snabbtest
Vad måste en HOC-wrapper vidarebefordra till den omslutna komponenten för att vara transparent?
Sammanfattning
En HOC som withLogging(Wrapped) returnerar en ny defineComponent vars setup renderar den omslutna komponenten med h(Wrapped, attrs, slots) och lägger till tvärgående beteende, till exempel loggning eller injicerade props. Vidarebefordra attrs och slots för transparens, och föredra composables när du bara behöver dela logik.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”Mönstret Higher-Order Components (HOC)” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Mönstret Higher-Order Components (HOC)”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Mönstret Higher-Order Components (HOC)”?
Omslut komponenter med HOC:er, vidarebefordra props och slots och avgör när HOC passar bättre än en composable. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Mönstret Higher-Order Components (HOC)”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vue Academy-lektionen?
Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- En djupdykning i funktionen h()
- JSX i Vue 3 med Vite
- Dynamiska komponenter med render-funktioner
- Mönstret Higher-Order Components (HOC)