Introduction détaillée au modèle de composant dynamique Vue.js (exemple de code)

Le contenu de cet article est une introduction détaillée (exemple de code) sur le modèle de composant dynamique Vue.js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Les composants n'ont pas toujours la même structure. Parfois, de nombreux états différents doivent être gérés. Il est utile de le faire de manière asynchrone.

Exemple :

Le modèle de composant est utilisé à plusieurs endroits dans certaines pages Web, telles que les notifications, les notes et les pièces jointes. Regardons ensemble les commentaires et voyons ce que je veux dire.
Les commentaires ne sont désormais plus de simples champs de texte. Vous souhaitez pouvoir publier des liens, télécharger des images, intégrer des vidéos, etc. Tous ces éléments disparates doivent être présents dans cette annotation. Si vous essayez de faire cela au sein d’un composant, cela peut très vite devenir très confus.

Comment y faire face

Comment devrions-nous gérer ce problème ? La plupart des gens vérifieront probablement d'abord tous les cas, puis chargeront ensuite des composants spécifiques. Quelque chose comme ceci :

<template>
    <p>
        // comment text    
        </p>
<p>...</p>
        // open graph image
        <link-open-graph></link-open-graph>
        // regular image
        <link-image></link-image>
        // video embed
        <link-video></link-video>
        ...
    
</template>

Cependant, cela peut devenir très déroutant et répétitif si la liste des modèles pris en charge s'allonge de plus en plus. Dans le cas de notre examen, pensez simplement à la prise en charge des intégrations de Youtube, Twitter, Github, Soundcloud, Vimeo, Figma... la liste est interminable.

Modèles de composants dynamiques
Une autre façon consiste à utiliser une sorte de chargeur pour charger les modèles dont vous avez besoin. Cela vous permet d'écrire un composant propre comme celui-ci :

<template>
    <p>
        // comment text    
        </p>
<p>...</p>
    
        // type can be 'open-graph', 'image', 'video'...
        <dynamic-link></dynamic-link>
    
</template>

C'est beaucoup mieux, n'est-ce pas ? Voyons comment fonctionne ce composant. Tout d’abord, nous devons modifier la structure des dossiers du modèle.

Personnellement, j'aime créer un dossier pour chaque composant car davantage de fichiers pour le style et les tests peuvent être ajoutés ultérieurement. Bien entendu, la manière dont vous souhaitez structurer votre structure dépend de vous.

Ensuite, voyons comment créer ce composant.

<template>
    <component></component>
</template>
<script>
export default {
    name: &#39;dynamic-link&#39;,
    props: [&#39;data&#39;, &#39;type&#39;],
    data() {
        return {
            component: null,
        }
    },
    computed: {
        loader() {
            if (!this.type) {
                return null
            }
            return () => import(`templates/${this.type}`)
        },
    },
    mounted() {
        this.loader()
            .then(() => {
                this.component = () => this.loader()
            })
            .catch(() => {
                this.component = () => import(&#39;templates/default&#39;)
            })
    },
}
</script>

Alors, que se passe-t-il ici ? Par défaut, Vue.js prend en charge les composants dynamiques. Le problème est que vous devez enregistrer/importer tous les composants que vous souhaitez utiliser.

<template>
    <component></component>
</template>
<script>
import someComponent from &#39;./someComponent&#39;
export default {
    components: {
        someComponent,
    },
}
</script>

Il n'y a rien ici car nous voulons utiliser notre composant de manière dynamique. Ce que nous pouvons donc faire, c'est utiliser les importations dynamiques de Webpack. Lorsqu'elles sont utilisées avec des valeurs calculées, c'est là que la magie opère - oui, les valeurs calculées peuvent renvoyer une fonction. Hyper pratique !

computed: {
    loader() {
        if (!this.type) {
           return null
        }
        return () => import(`templates/${this.type}`)
    },
},

Après avoir installé notre composant, nous essayons de charger le modèle. Nous pouvons mettre en place un modèle de secours en cas de problème. Cela serait peut-être utile pour afficher un message d'erreur à l'utilisateur.

mounted() {
    this.loader()
        .then(() => {
           this.component = () => this.loader()
        })
        .catch(() => {
           this.component = () => import('templates/default')
        })
},

Conclusion

Peut être utile si vous avez de nombreuses vues différentes d'un composant.

• Facile à étendre.

• C'est asynchrone. Les modèles ne sont chargés qu’en cas de besoin.

• Gardez votre code propre.

C'est essentiellement ça !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!