Vue Academy · Leçon

Modèle des composants d’ordre supérieur (HOC)

Encapsulation de composants avec des HOC, transmission des props et emplacements et choix entre HOC et composable

Leçon 4 sur 413 étapes

Modèle des composants d’ordre supérieur (HOC) est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce qu'un composant d'ordre supérieur

Un composant d'ordre supérieur (HOC) est une fonction qui reçoit un composant et retourne un nouveau composant qui l'enveloppe. Il ajoute un comportement transversal, comme la journalisation, les vérifications d'authentification ou le chargement de données, sans modifier l'original.

La signature de la fonction

Par convention, un HOC est nommé avec le préfixe with. Il reçoit le composant enveloppé et retourne un composant enrichi.

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

Retourner defineComponent

Le nouveau composant est créé avec defineComponent. Sa fonction de configuration rend le composant enveloppé au moyen de h.

import { defineComponent, h } from "vue";

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

Transmettre les attributs

Pour que l'enveloppe soit transparente, déployez ctx.attrs sur le composant enveloppé. Cela transmet la classe, le style et toutes les propriétés non reconnues.

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

Transmettre les emplacements

Passez l'objet slots de l'enveloppe comme argument des enfants afin que le composant enveloppé reçoive toujours tout le contenu des emplacements fourni par l'utilisateur.

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

Ajouter un comportement transversal

Le but est d'injecter un comportement. Ici, nous journalisons le montage et le démontage autour du composant enveloppé.

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);
    }
  });
}

Utiliser le HOC

Enveloppez n'importe quel composant et utilisez le résultat comme un composant normal dans les modèles ou dans d'autres fonctions de rendu.

import BaseTable from "./BaseTable.vue";

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

Nommer l'enveloppe

Définissez un name afin que l'enveloppe soit identifiable dans Vue DevTools. Composer le nom du composant enveloppé permet de conserver une arborescence lisible.

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

Injecter des propriétés supplémentaires

Un HOC peut fournir des propriétés supplémentaires au composant enveloppé, comme un ensemble de données récupéré ou un indicateur de fonctionnalité.

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

HOC et fonctions composables

Les fonctions composables partagent de la logique et sont souvent privilégiées dans Vue 3. Les HOC sont préférables lorsque vous devez envelopper le rendu d'un composant existant que vous ne pouvez pas modifier, ou standardiser une frontière comme la gestion des erreurs.

Composer plusieurs HOC

Comme chaque HOC retourne un composant, ils se composent par imbrication. Appliquez-les en terminant par le plus externe.

const Enhanced = withLogging(withUser(BaseTable));

Vérification rapide

Pour qu'une enveloppe HOC soit transparente, que doit-elle transmettre au composant enveloppé ?

Réponds-y dans la leçon interactive

Récapitulatif

Un HOC comme withLogging(Wrapped) retourne un nouveau defineComponent dont la fonction de configuration rend le composant enveloppé avec h(Wrapped, attrs, slots), en ajoutant un comportement transversal comme la journalisation ou l'injection de propriétés. Transmettez les attributs et les emplacements pour assurer la transparence, et préférez les fonctions composables lorsque vous avez seulement besoin de partager de la logique.

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 42
Leçons: 156

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Modèle des composants d’ordre supérieur (HOC) » est-elle gratuite ?

Oui — le texte complet de « Modèle des composants d’ordre supérieur (HOC) » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Modèle des composants d’ordre supérieur (HOC) » ?

Encapsulation de composants avec des HOC, transmission des props et emplacements et choix entre HOC et composable Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Modèle des composants d’ordre supérieur (HOC) » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

La fonction h() en profondeur
JSX dans Vue 3 avec Vite
Composants dynamiques avec les fonctions render
Modèle des composants d’ordre supérieur (HOC)

← Retour à Vue Academy