Слушайте пользовательское событие из кода js в тегах скрипта vue2

Я испускаю пользовательское событие от одного из правнуков моего основного компонента app.vue следующим образом:

this.$emit('logged');

И теперь я хочу прослушать это событие в моем основном компоненте app.vue, но я бы предпочел сделать это из javascript в тегах <script>, чем из <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>

Возможно ли прослушивать пользовательское событие из кода js в vue 2? Я не смог найти такой информации.


javascript events vue.js vuejs2 custom-events
person BT101    schedule 20.12.2017    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Читайте Пользовательские события и Общение между родителями и детьми в документации.

События, генерируемые компонентом, не всплывают более чем на один уровень, поэтому вы не сможете напрямую прослушивать событие logged, генерируемое пра-внучатым компонентом из вашего основного компонента, если только вы не проксируете событие вверх на каждом уровне.

В качестве альтернативы вы можете использовать шину событий для связи между родителями и детьми (см. ссылку выше).

Вот как вы будете прослушивать событие в коде:

<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>

Но на самом деле в приведенной выше ситуации вы бы просто использовали v-on. Если вы используете шину событий, вам необходимо использовать $on() и $off() программно. Я не буду объяснять шаблон шины событий, потому что я уверен, что он уже широко обсуждался на SO.

person Decade Moon    schedule 20.12.2017
comment
Является ли использование централизованного состояния vuex хорошим подходом? По сути, я хочу повторно отобразить часть контента с помощью логической переменной, которая должна быть доступна во всем приложении, чтобы использовать ее в директиве v-if в нескольких разных компонентах. - person BT101; 21.12.2017
comment
Vuex используется для обмена состоянием между компонентами, да, вы можете это сделать. - person Decade Moon; 21.12.2017