Explication détaillée des exemples de composants dynamiques personnalisés Vue

Vue propose de nombreux types de bibliothèques de composants d'interface utilisateur, mais de nombreuses bibliothèques de composants ne peuvent pas répondre à nos besoins de développement, nous devons donc écrire un plug-in en fonction de nos propres besoins. Ci-dessous, je vais vous présenter les composants personnalisés js à travers deux. châtaignes. Méthode, les amis intéressés devraient y jeter un œil

Il existe de nombreuses bibliothèques de composants d'interface utilisateur basées sur vue, telles que iview, element-ui, etc. Mais parfois, ces bibliothèques de composants ne peuvent pas répondre à nos besoins de développement. Pour le moment, nous devons écrire nous-mêmes un plug-in.

Donnez-moi le premier exemple

Après avoir utilisé vue-cli pour construire le répertoire du projet, créez un nouveau dossier sous src/components pour y mettre us in Le plug-in à écrire est comme indiqué sur l'image :

Écrivez notre composant dans index.vue, le code est le suivant :

Écrivez la méthode d'installation d'index.vue dans index.js et utilisez Vue.component pour enregistrer le composant. Le code est le suivant :

Vous avez terminé. Vous pouvez l'utiliser directement dans app.vue. Eh bien, vous pouvez voir que les composants correspondants ont été affichés sur la page, comme le montre la figure :

À ce stade, nous pouvons également personnaliser l'événement click et le transmettre au nôtre via les paramètres du plug-in, le plug-in peut obtenir l'événement via l'attribut props, comme le montre la figure :

Vous pouvez voir que la page a pris effet :

Vue.component(id, [definition])

Vue.use(plugin)

Prenons la deuxième châtaigneCréons un autre dossier, comme indiqué sur l'image :

Nous voulons écrire un composant qui peut afficher du contenu externe et disparaître automatiquement après 3 secondes. Le code est le suivant :

Ensuite, nous devons ajouter un index. . Utilisez le constructeur dans js pour le créer, comme indiqué dans la figure :

Référencez toujours le fichier js tout à l'heure dans le main.js par défaut et ajoutez-le à Vue. par exemple, vous pouvez donc l'appeler directement via this.$seconddemo(). Le code est le suivant :

import SecondDemo from './components/global/seconddemo/index'Vue.prototype.$seconddemo = SecondDemo

Utilisez-le dans app.vue. et constatez que le plug-in est chargé avec succès Comme le montre la figure :

Vue.extend(options)

Gestion unifiée des composants personnalisésLorsqu'il y a un grand nombre de composants, nous pouvons gérer ces composants personnalisés en fournissant un fichier d'export unifié , créez d'abord un nouveau fichier index.js sous le dossier global. Le code est le suivant :

Le fichier index.js nous aide à transmettre tous les composants personnalisés via Vue. composant enregistré, et enfin exporter un objet contenant la méthode d'installation vers Vue.use().

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

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!