Écouter un événement personnalisé à partir du code js dans les balises script vue2

Question

J'émets un événement personnalisé depuis l'un des arrière-petits-fils de mon app.vue composant principal comme ceci :

this.$emit('logged');

Et maintenant je veux écouter cet événement dans ma app.vue mais je préférerais le faire à partir de javascript dans le cadre de l'application <script> que de <template> :

<template>
    <div>
        <app-header></app-header>
        <router-view></router-view>
        <app-footer></app-footer>
  </div>
</template>

<script>
    import header from './components/shared/header.vue';
    import footer from './components/shared/footer.vue';

    export default {
        components: {
            'app-header': header,
            'app-footer': footer
        }
    }

// can I listen to custom events somewhere here above?
</script>

Est-il possible d'écouter un événement personnalisé à partir d'un code js dans Vue 2 ? Je n'ai pas trouvé cette information.

Answer 1

Lire Événements personnalisés y Communication non parent-enfant dans les docs.

Les événements émis par un composant ne remontent pas à plus d'un niveau, de sorte que vous ne pourrez pas écouter directement l'événement logged émis par un composant arrière-petit-enfant à partir de votre composant principal, à moins que vous ne transmettiez l'événement vers le haut à chaque niveau.

Vous pouvez également utiliser un bus d'événements pour la communication non parent-enfant (voir le lien ci-dessus).

C'est ainsi que l'on écoute un événement en code :

<template>
  <div>
    <my-component ref="mycomp"></my-component>
  </div>
</template>

<script>

export default {
  mounted() {
    // You need to have a reference to the component you want to listen to
    // which is why I'm using refs here
    this.$refs.mycomp.$on('logged', () => {
      alert('Got logged event');
    });
  }
}

</script>

Mais en réalité, dans la situation ci-dessus, vous utiliseriez simplement v-on . Si vous utilisez un bus d'événements, vous devez utiliser la fonction $on() y $off() de manière programmatique. Je ne vais pas expliquer le modèle de bus d'événements car je suis sûr qu'il a déjà été largement discuté sur SO.