child 组件 Vue.js 中的道具值未更新

Question

我正在为 parent App.vue 添加一种方法，告诉所有 child 组件关闭您打开的每个模式，并为任何给定的 child 告诉parent 在有人点击主应用程序时隐藏覆盖层 div。因此，例如，如果服务页面打开了一个模态以查看某些详细信息，则在 parent App.vue 组件中设置的叠加层将处于活动状态，如果我单击模态之外的任何位置，模态将关闭并且 child 将告诉 parent 关闭覆盖。我以这种方式设置它，以便它在全球范围内可用，而不是孤立于单个组件。

<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');
    }
  }
};

所以这有效，但只在第一次有效。该道具仅将更新后的值发送到 child 一次。我试过观看 child 中的道具并也使用 forceUpdate 但它不起作用。我如何每次都制作这个运行？

Answer 1

当组件必须跨不同 parent/child 级别相互通信时，全局事件总线会有所帮助。下面是一篇很好的文章：

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

注意：但一定要在必要的时候才使用它，并在组件的beforeDestroy生命周期中移除监听器

child 组件 Vue.js 中的道具值未更新

Prop value isn't updating in child component Vue.js

javascript

frontend

vue.js

vue-router

vue-component