Composants dynamiques avec les fonctions render
Changement de composant selon son type, résolution des composants et conservation des emplacements dans les fonctions render
Composants dynamiques avec les fonctions render est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.
Composants dynamiques dans les fonctions de rendu
Les modèles utilisent <component :is="..."> pour remplacer des composants à l'exécution. Dans une fonction de rendu, vous obtenez le même résultat avec les fonctions d'aide de résolution et h.
resolveComponent
resolveComponent recherche un composant enregistré globalement ou localement à partir de son nom d'enregistrement et le retourne pour l'utiliser avec h.
import { h, resolveComponent } from "vue";
export default {
render() {
const Btn = resolveComponent("MyButton");
return h(Btn, null, () => "Click");
}
};resolveDynamicComponent
Lorsque la cible peut être un nom enregistré, une balise HTML ou un objet composant, utilisez resolveDynamicComponent. Cette fonction gère les trois cas.
import { h, resolveDynamicComponent } from "vue";
h(resolveDynamicComponent(props.type));Déterminer le type à partir des propriétés
Transmettez le nom du composant par l'intermédiaire d'une propriété et résolvez-le à chaque rendu. C'est l'équivalent, pour les fonctions de rendu, de :is.
export default {
props: { type: String },
render() {
const Comp = resolveDynamicComponent(this.type);
return h(Comp, { msg: "hi" });
}
};Transmettre les propriétés
Déployez les attributs reçus sur le composant résolu afin que l'enfant dynamique reçoive tout ce qui a été transmis par le parent.
setup(props, { attrs }) {
return () => h(
resolveDynamicComponent(props.type),
{ ...attrs }
);
}Transmettre les emplacements
Les emplacements atteignent un enfant par le troisième argument de h. Transmettez directement l'objet d'emplacements du parent afin que le composant dynamique les rende.
setup(props, { slots }) {
return () => h(
resolveDynamicComponent(props.type),
null,
slots
);
}Un moteur de rendu réutilisable
La combinaison de la transmission des attributs et des emplacements produit une fine enveloppe qui rend n'importe quel composant à partir de son nom tout en transmettant tout le contenu.
setup(props, { attrs, slots }) {
return () => h(
resolveDynamicComponent(props.is),
attrs,
slots
);
}Moteurs de rendu dynamiques pour les colonnes
Les tableaux de données permettent souvent à chaque colonne de spécifier son propre composant de rendu. Stockez le nom du composant pour chaque colonne et résolvez-le pour chaque cellule.
const columns = [
{ field: "name", renderer: "TextCell" },
{ field: "price", renderer: "MoneyCell" }
];Rendre les cellules dynamiquement
Pour chaque colonne, résolvez son moteur de rendu et transmettez-lui la valeur de la cellule comme propriété. Une seule boucle permet de gérer des types de cellules hétérogènes.
render() {
return h("tr", null,
columns.map((col) =>
h("td", null, [
h(resolveDynamicComponent(col.renderer), {
value: this.row[col.field]
})
])
)
);
}Repli vers une balise
Si resolveDynamicComponent reçoit un nom non enregistré, il le traite comme une chaîne représentant un élément natif ; ainsi, "div" rend une véritable div en toute sécurité.
h(resolveDynamicComponent("div"), { class: "box" }, "fallback");Pourquoi utiliser ici des fonctions de rendu
Les fonctions de rendu sont particulièrement utiles lorsque la structure est calculée : nombre variable d'enfants, types de composants propres à chaque élément ou logique qui nécessiterait de nombreuses conditions imbriquées dans un modèle.
Vérification rapide
Quelle fonction d'aide résout en toute sécurité une cible qui peut être un nom de composant OR une balise HTML native ?
Récapitulatif
Utilisez resolveComponent pour les noms enregistrés et resolveDynamicComponent lorsque la cible peut également être une balise HTML ou un objet composant. Transmettez attrs comme propriétés et passez l'objet slots comme troisième argument de h. Ce modèle permet de créer des moteurs de rendu dynamiques pour les colonnes de tableaux ainsi que des enveloppes flexibles.
Questions Fréquemment Posées
La leçon « Composants dynamiques avec les fonctions render » est-elle gratuite ?
Oui — le texte complet de « Composants dynamiques avec les fonctions render » 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 « Composants dynamiques avec les fonctions render » ?
Changement de composant selon son type, résolution des composants et conservation des emplacements dans les fonctions render 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 3 sur 4.
Combien de temps prend la leçon « Composants dynamiques avec les fonctions render » ?
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)