Значение пропа не обновляется в дочернем компоненте Vue.js

Question

Я добавляю способ для родителя App.vue сказать всем дочерним компонентам, чтобы он закрывал все открытые вами модалы, а любому ребенку - сказать родителям, чтобы они скрывали оверлей, если кто-то нажимает на основной div приложения. Так, например, если на странице служб открыт модальный режим для просмотра некоторых деталей, будет активен оверлей, установленный в родительском компоненте App.vue, и, если я щелкну где-нибудь за пределами модального режима, модальный режим закроется, а дочерний будет скажите родителю, чтобы закрыть наложение. Я настроил его так, чтобы он был доступен глобально и не был изолирован для одного компонента.

<template>
  <div id="app" v-cloak :class="{'overlay-layer' : overlay.active}" v-on:click="close($event)">

    <Header/>

    <transition>
      <router-view v-on:overlay="overlay.active = $event" :closeAllModals="overlay.close"/>
    </transition>

    <Footer/>

  </div>
</template>

<script>
import Header from '@/components/header/Header.vue';
import Footer from '@/components/footer/Footer.vue';

export default {
  components: {
    Header,
    Footer
  },
  props: {
    closeAllModals: Boolean
  },
  data: function() {
    return {
      overlay: { active: false, close: false }
    };
  },
  methods: {
    close(e) {
      if (this.overlay.active && e.toElement.id === 'app') {
        this.overlay = {
          active: false,
          close: true
        }
      }
    }
  }
};
</script>

Проблема в том, что это выполняется только один раз, например, на странице служб у меня есть:

import Header from '@/components/header/Header.vue';
import Footer from '@/components/footer/Footer.vue';

export default {
  name: 'services',
  components: {
    Header,
    Footer
  },
  props: {
    closeAllModals: Boolean
  },
  data: function() {
    return {
      overlay: false,
      activeMember: Object,
    };
  },
  methods: {
    setActiveMember(member, open) {
      this.activeMember = member;
      if (open) {
        this.activeMember.active = true;
        this.overlay = true;
      } else {
        this.activeMember.active = false;
        this.overlay = false;
      }
      this.$emit('overlay', this.overlay);
      this.$forceUpdate();
    },
  watch: {
    closeAllModals: function() {
      this.activeMember.active = false;
      this.overlay = false;
      this.$forceUpdate();
      console.log('runs once');
    }
  }
};

Так что это работает, но работает только в первый раз. Подставка отправляет обновленное значение ребенку только один раз. Я пытался посмотреть на ребенка и использовать forceUpdate тоже, но он не работает. Как сделать так, чтобы это запускалось каждый раз?

Answer 1

Глобальная шина событий может помочь, когда компонентам приходится общаться друг с другом на разных родительских / дочерних уровнях.Ниже приведена хорошая запись:

https://alligator.io/vuejs/global-event-bus

Примечание: но обязательно используйте его только при необходимости и удалите слушателей в beforeDestroy жизненном цикле компонента