Vue2.0 sur l'émission et la réception d'événements entre le composant parent et le composant enfant

Cet article présente principalement l'exemple de code d'émission et de réception d'événements entre le composant parent de Vue2.0 et le composant enfant. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Concernant l'émission et la réception d'événements de vue2.0, tout le monde sait que $dispatch et $broadcast ont été obsolètes dans vue2.0, et sont remplacés par un moyen d'utilisation plus pratique et plus rapide Events Center, à travers lequel les composants communiquent entre eux, quelle que soit la couche dans laquelle se trouve le composant, cela peut être réalisé en instanciant une Vue vide. Cas précédent :                                                                                                                                                                                                                          Le principe est que lorsque l'on clique sur le bouton plus ou moins du composant enfant, un événement est distribué et le composant parent reçoit l'événement. Je pense que tout le monde n'aura aucun problème avec les codes html et css. Je n'entrerai pas dans les détails ici. Parlons directement de la partie js. Tout d'abord, ajoutez un objet Vue vide nommé eventHub aux données lors de l'initialisation du projet. La fonction est de permettre à n’importe quel composant d’appeler la méthode d’émission et de réception d’événements. Le code est le suivant :

Envoi d'un événement au composant parent lorsque l'on clique sur le bouton plus :

À cause du json que j'ai écrit Les données sont en deux couches :

Ainsi, la boucle à deux couches affiche les données sur la page Pour afficher avec précision la quantité d'un certain aliment. , vous devez connaître la première catégorie et ceci. Pour la valeur d'index de cet aliment sous la catégorie principale, les deux index sont d'abord transmis au composant enfant dans le HTML, puis lorsque l'événement est distribué, ils sont regroupés ensemble dans un objet avec la quantité et envoyé au composant parent.

N'oubliez pas que le composant enfant doit déclarer l'enfant et le parent dans les accessoires, puis le composant parent reçoit le countFunc émis :

A ce moment, console.log() l'obj dans countFunc passé par le composant enfant Vous constaterez que le composant parent a reçu un objet : Object {count : 1, index : 0, parent : 0 }, qui. Autrement dit, lorsque je clique sur le bouton plus d'Apple, un compte de 1 indique que la quantité est de 1, un index parent de 0 indique qu'il s'agit de la première catégorie et un index de 0 indique qu'il s'agit d'une pomme dans la première catégorie. Jusqu'à présent, l'émission et la réception d'événements entre les composants parent et enfant ont été implémentées.

Le code complet est le suivant :

1. Composant parent :

2. Sous-composants :

Recommandations associées :

Explication détaillée de la liaison d'événement à l'aide du modèle d'émetteur d'événement dans Node.js_node.js

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!