web-dev-qa-db-fra.com

$ emit ne déclenche pas d'événements enfants

Pour un projet VueJS 2.0, j'ai les éléments suivants sur le composant parent

<template>
<child></child>
<button @click="$emit('childEvent)"></button>
</template>

sur le composant enfant que j'ai: 

{
  events: { 'childEvent' : function(){.... },
  ready() { this.$on('childEvent',...) },
  methods: { childEvent() {....} }
}

Rien ne semble fonctionner sur le clic du bouton. Est-ce que je dois créer une méthode parent qui serait ensuite émise à l'enfant? J'utilisais vuejs 1. mais maintenant je ne comprends plus comment fonctionnent les communications entre parents

vue-componentvue.jsvuejs2
11
Kendall

Alors que les autres réponses sont correctes et qu'il est généralement possible d'utiliser une approche basée sur les données. 

Je vais ajouter ceci à ceux qui cherchent une réponse à cette question et qui ont besoin d'un moyen autre que des accessoires. J'ai rencontré un problème similaire lorsque j'essayais de définir le focus sur une entrée particulière dans un composant de formulaire personnalisé. Pour ce faire, je devais donner au composant personnalisé un ref puis faire ceci.

this.$refs.customInput.$emit('focus');
//or
this.$refs.customInput.directlyCallMethod();

Cet accès à l'instance de vue de l'enfant et vous pouvez ensuite émettre un événement qui est entendu par ce composant.

18
qw3n

Comme par le documentation :

Dans Vue.js, la relation composant parent-enfant peut être résumée en tant qu'accessoires en bas, événements en haut. Le parent transmet les données à l'enfant via des accessoires et celui-ci envoie des messages au parent via des événements. Voyons comment ils fonctionnent ensuite.

enter image description here

Ainsi, dans la dernière Vue, vous ne pouvez pas envoyer d'événements d'un parent à un enfant, vous pouvez transmettre des accessoires à un enfant et envoyer un événement d'un enfant à un parent.

17
Saurabh

Vous pouvez utiliser une instance Vue personnalisée pour cela.

// Globally
const eventBus = new Vue()

// In your child
eventBus.$on('eventName', () => {
    // Do something
});

// In your parent
eventBus.$emit('eventName')
9
MarceauKa

Les événements de parent à enfant sont effectués avec $broadcast() dans Vue 1.0 et ne sont pas du tout possibles dans Vue 2.0.

Et vous n’avez peut-être pas besoin de cela, il existe généralement une meilleure solution que celle qui n’a pas besoin d’événements, mais cela dépend de votre cas d'utilisation. 

3
Linus Borg

Je devais le faire pour un popover où plusieurs pourraient exister et les accessoires pour chacun sont inappropriés.

Pour envoyer des événements globaux, il est possible d’ajouter des écouteurs d’événements à l’instance de Vue racine.

// Child:
    created() {
      this.$root.$on('popover', (e) => {
        // Determine if popover should close, etc.
        this.close()
      })
    },
    
// Parent: 
  this.$emit('popover', 'arg1', 'argn')

N'oubliez pas d'appeler $ off dans destroyed également.

0
adc