À propos des événements personnalisés dans les composants Vue (tutoriel détaillé)

Cet article présente la fonction d'événements personnalisés des composants Vue sous forme d'images et de textes. Il est très bien et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

Utilisez v-on pour lier. événements personnalisés.

(1) Initialisation du projet basée sur webpack

Avant de l'utiliser, nous utilisons d'abord npm pour créer une application vue afin que le projet peut être facilement Il est préférable de l'utiliser avec le packager du module webpack. La commande est la suivante

Entrez le dossier vide personnalisé vuepro L'initialisation du projet myapp doit utiliser l'empaquetage webpack pour générer un dossier de projet dans. un répertoire standard

vue init webpack myapp

Dans le processus d'installation, nous aurons plusieurs endroits à opérer. Pour les premiers, appuyez simplement sur Entrée puis entrez n, comme indiqué ci-dessous

<.>

Une fois l'installation terminée, myapp Certains fichiers et dossiers seront automatiquement générés sous le dossier, indiquant que l'initialisation de notre projet est terminée et que notre APP.vu est le composant principal. Le composant composants est un. Le mécanisme de réutilisation du code de Vue. Components mélange js et HTML ensemble, comme base de l'ensemble de la couche d'application Vue

Nous pouvons exécuter notre projet selon la commande demandée par le. terminal dans l'image ci-dessus

cd myapp

npm run dev

Nous attribuons ensuite l'URL obtenue dans l'image ci-dessus au navigateur et l'ouvrons Ce qui suit. La page indique que notre projet basé sur le webpack a été construit avec succès

Ouvrez le composant principal Si vous voyez le même rappel que l'image ci-dessous, c'est parce que notre javascript ne prend pas en charge. Syntaxe ES6. Il suffit de saisir les paramètres et de modifier le type de langue.

Ici, nous pouvons introduire l'utilisation d'événements personnalisés de composants

( 2) v -on && $emit utilise $on(eventName) pour écouter les événements et utilise $emit(eventName) pour déclencher des événements

Nous créons un nouveau composant Emit.vue sous myapp/src/ composants , en même temps nous devons introduire le composant dans le composant principal APP.vue, et enregistrer le composant

Ensuite, nous ajoutons quelques exemples d'événements personnalisés dans l'Emit Fichier .vue

Lorsque nous cliquons sur le bouton, nous pouvons obtenir les paramètres de la boîte d'événement à l'intérieur du composant

Le ci-dessus est ce que j'ai compilé pour tout le monde. Oui, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Utilisation de JavaScript natif pour obtenir un effet loupe

Analyse détaillée du code source de Vue Socket.io

Communication du composant Vue (tutoriel détaillé)

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!