Maison >interface Web >js tutoriel >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 :
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 :
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!