Fermer

novembre 30, 2020

Composants dynamiques avec le 'composant' de Vue


Dans cet article, nous explorerons les de Vue et comment créer des composants chargés dynamiquement.

Un moment vient dans la vie de tout développeur Vue où vous vous surprenez à souhaiter qu'une partie particulière de votre modèle puisse être dynamique et basculer entre un ou plusieurs composants en fonction de certaines conditions qui sont calculées ailleurs.

Prenons par exemple un site Web qui restitue un contenu spécifique uniquement lorsqu'un utilisateur est enregistré et connecté, mais il a également une troisième version qui est affichée si cet utilisateur particulier a un abonnement payant.

Une façon d'aborder le problème pourrait être de chaîner v-if s comme ceci:

Cela fonctionnera certainement mais même avec bonne composition des composants, cela peut rapidement devenir un problème. Si votre logique devient plus complexe ou si vous devez ajouter différents composants au fil du temps, votre modèle deviendra encombré et difficile à maintenir.

Un autre scénario courant consiste à avoir un point de terminaison d'API vous indiquant sur quel type de composants il souhaite que le frontend soit rendu. l'écran – une sorte de schéma ou de manifeste. Ce cas particulier peut donner lieu à des applications très puissantes, mais nous devons nous plonger dans la création de composants dynamiques.

La directive: is et

Vue nous donne un composant spécial et une directive pour aborder ce type du problème, le composant . Ce composant spécial se comporte comme un espace réservé dans votre modèle. Il rendra n'importe quel type d'élément à l'intérieur – des composants personnalisés comme Guest aux éléments HTML de base comme

  • .

    Pour que nous puissions utiliser nous devons lui passer un attribut nommé est . Cette directive attend une valeur, à savoir une chaîne ou un objet, un composant enregistré ou un objet de configuration de composant. Voyons d'abord comment faire cela avec des chaînes.

    Repensons notre exemple précédent avec l'utilisation de . Notre modèle va être beaucoup simplifié, comme suit:

     < template > 
   < component :  is  =  " userComponent "  / > 
 < /  template >

    À ce stade, vous pouvez commencer à voir à quel point peut être puissant: Notre modèle est plus propre, et bientôt nous ajouterons une propriété calculée pour encapsuler notre logique.

    Nous allons créer une propriété calculée, userComponent qui permettra à de savoir quel composant il doit rendre. Pour ce faire, nous allons déplacer notre logique vers cette propriété calculée, et retourner une chaîne avec le nom du composant qui doit être rendu.

    Important: ] Sachez que lorsque vous utilisez l'approche string vos composants doivent être enregistrés dans votre application, soit en tant que composants globaux, soit importés dans votre composant et enregistrés sous l'option components qui les rendre.

    Une autre façon de faire ceci, comme vous le verrez ci-dessous, est de retourner le composant importé lui-même dans la propriété calculée.

    Si vous oubliez de faire cela, Vue émettra un avertissement. "Composant inconnu : avez-vous enregistré le composant correctement?"

    Ajoutons maintenant la propriété calculée et les importations nécessaires.

    En haut, nous importons les trois composants comme d'habitude. Notez que nous créons également un état local data () pour l'objet user à des fins de démonstration.

    Dans le prop calculé userComponent nous sommes transférer notre logique qui était auparavant sur le modèle. Vous pouvez déjà comprendre que c'est à la fois plus lisible et surtout beaucoup plus flexible. Vous pouvez utiliser Axios ou Vuex – ou même charger ici un schéma dynamique à partir d'un fichier de votre application pour définir quel composant est censé être rendu. Les possibilités sont infinies!

    Chargement dynamique

    Ok donc pour le moment, nous avons déjà une valeur ajoutée sur la façon dont notre composant est placé sur l'écran de l'utilisateur, mais je peux toujours voir un problème avec lui. Les composants doivent encore être ajoutés manuellement dans notre application, et ils sont TOUS chargés même si l'utilisateur qui navigue sur notre site n'arrive jamais à les voir.

    Prenons quelques mesures pour que ces composants se chargent dynamiquement lorsqu'ils sont demandés par le navigateur , cela réduira la taille de notre bundle d'applications, car webpack les placera dans des blocs externes.

    Pour que cette approche fonctionne, nous allons modifier notre propriété calculée pour renvoyer une fonction, qui en retour importera un composant dynamiquement.

    Notez d'abord que toutes nos déclarations import en haut ont maintenant disparu. Ce n'est plus nécessaire, car les composants se chargeront de manière dynamique et asynchrone au fur et à mesure qu'ils sont nécessaires. Cependant, nous choisissons de créer des variables const en haut pour les importer.

    Pourquoi? Si nous retournons les instructions import directement dans la propriété calculée, chaque fois que cela est exécuté, une nouvelle fonction sera renvoyée. Si par la suite vous souhaitez utiliser l'élément (que nous examinerons dans la section suivante), votre état ne sera pas conservé.

    La propriété calculée userComponent a été refactorisée, elle retourne maintenant une fonction avec une instruction import dans chaque cas. Cette fonction elle-même renvoie une promesse qui se résoudra dans le composant, qui est… drumroll …

    An Object ! Rappelez-vous au début de l'article, lorsque nous discutions que : est-ce que peut accepter une chaîne ou un objet? Voici comment vous utilisez : is – l'objet du nom, l'objet composant.

    Au fait, si vous ne vous souciez pas de la fonction de flèche sans syntaxe de retour, ou si vous avez encore du mal à comprendre ce qui se passe exactement là (cela m'a pris un peu, je l'avoue), vous pouvez réécrire l'instruction de retour comme ceci:

     const   User   =   function  ()   {[19659053] return   import  ( './ components / Guest' ) 
}

    Un smol bit digne d'être mentionné sur l'utilisation de est l'élément spécial .

    Il y aura des moments où vous voudrez que votre utilisateur permute entre les différents éléments de votre application. Imaginez si, dans notre scénario de démonstration, le Member avait également accès à un bouton pour passer à la vue User pour bénéficier de fonctionnalités supplémentaires.

    Vous pouvez simplement ajouter une logique supplémentaire à votre propriété calculée pour basculer entre eux en cliquant sur un bouton, mais lorsque l'utilisateur commence à utiliser chaque composant et à faire des va-et-vient, il va rencontrer un problème très particulier: Vue détruit et remonte les composants en tant que l'utilisateur bascule entre eux. Tout état stocké localement dans le composant va être complètement perdu.

    Pour ce type de scénario où vous voulez garder les composants vivants vous disposez de cet outil sur votre ceinture de développement. Regardons-le sur notre exemple actuel.

     < garder  -  en vie > 
   < composant :  is  = [19659019] "userComponent"  / > 
 < /  keep  -  alive >

    En enveloppant simplement notre à l'intérieur [19659061]Vue commencera la mise en cache et préservera l'état de ces composants lorsqu'ils sont échangés à l'écran.

    Gardez à l'esprit que, comme nous l'avons mentionné précédemment, si vous renvoyez l'importation directement dans la propriété calculée, l'état ne ne sera pas mis en cache en raison du fonctionnement de la comparaison JavaScript. En termes simples, les fonctions ne seront pas exactement les mêmes.

    Configurons App.vue afin que nous puissions facilement basculer entre les composants pour les tests.