Comment définir des composants personnalisés dans vue

Comment définir des composants personnalisés dans vue : créez d'abord un composant d'effet de chargement ; puis créez un fichier [.js] associé et enfin insérez le composant dans la balise [<loading></loading>] à l'intérieur.

L'environnement d'exploitation de ce tutoriel : système Windows 7, Vue version 2.9.6, ordinateur Dell G3. Cette méthode convient à toutes les marques d'ordinateurs.

Comment définir des composants personnalisés dans vue :

1. Commencez par créer le fichier de composant. Ici, je suppose que vous souhaitez créer votre propre composant d'effet de chargement. nous allons d'abord Le code à l'intérieur de la création loading.vue peut être écrit selon le modèle de règles de vue pertinent. Je n'entrerai pas dans les détails ici, je n'écrirai que l'exemple le plus simple

.

2. Nous créons un fichier .js associé qui a généralement une fonction et son propre dossier, donc chaque composant doit avoir son propre fichier d'appel indépendant (un pot de riz, un pot donc par souci d'unification). Vous pouvez les appeler index.js. Bien sûr, vous pouvez le nommer comme vous le souhaitez. À partir de maintenant, vous ne pouvez modifier les noms pertinents que lors des appels ultérieurs ! Voici le point : comment est fabriqué ce pot ? Sans plus attendre, passons simplement à l'image

Alors à quoi servent les trois cases incohérentes ci-dessus : La case rouge : Je n'ai pas besoin de demander Tu appelles ça. fichier ? Vous devez le dire au monde. Bien sûr, nous devons appeler le fichier loading.vue que nous venons de créer. Cadre jaune : Je compte sur ce cadre jaune pour être le point clé de cet article. Pourquoi dites-vous cela si nous voulons utiliser nos propres composants, nous devons exporter ce composant, et le code dans ce cadre jaune est d'exporter le. configuration correspondante de nos propres composants. La ligne ondulée très obscène est la « pierre angulaire » de cet exemple. Ce nom est le nom que vous utilisez pour appeler ce composant (voici le composant de chargement) dans d'autres fichiers. le composant, nous pouvons l'écrire comme <loading></loading> . Cadre blanc : Il n'y a rien à dire là-dessus Cela équivaut à exporter ce composant et c'est facile à accepter en main !

3. La matière première, le riz, est également disponible, et le pot de riz est également disponible. Maintenant que tout est prêt, nous n'avons plus besoin que du vent d'est. Ensuite, notre troisième partie est un mot « cuisinier » et deux mots. : "feu". C'est là que nous voulons créer le nôtre. Veuillez consulter l'image ci-dessous pour plus de détails sur la façon d'appliquer le composant à notre page

La partie encadrée jaune est pour introduire le composant qui vient d'être défini et appliquer ce composant dans le fichier principal main.js !

Enfin, vous pouvez insérer <loading></loading> partout où vous souhaitez utiliser ce composant. Le style et le code js correspondant du composant peuvent être écrits directement dans le fichier dans la première étape ! C'est un tel bonheur d'utiliser un composant que vous avez créé vous-même !

Recommandations d'apprentissage gratuites associées : javascript (vidéo)

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!